デザイナーや学生、画面の背景を作成する方は、書き出す前にコントロールを使ってグラデーションを調整できます。画像はブラウザー内でローカルに生成されるため、色の設定を外部にアップロードせずにファイルを作成できます。
グラデーション背景ジェネレーターの使い方
- 背景の塗りつぶしとして、単色、線形、放射状から選びます。メインカラーを設定し、グラデーションの色の停止点を追加または削除して、好みのブレンドを作成します。
- 線形グラデーションの場合は、グラデーション角度（度）を調整します。ランダムシードとグラデーションプリセット（Sea または Dusk）を使い、「シードから生成」を選択すると、シードに基づくバリエーションを作成できます。同じ位置にある停止点は、意図的にくっきりした境界を作ります。
- 出力解像度のプリセットとして、1920x1080、1080x1080、1080x1920などを選びます。「カスタム」を選択すると、出力幅（ピクセル）と出力高さ（ピクセル）を自分で入力できます。
- 画像形式でPNG、JPG、WEBPを選択します。プレビューは小さく表示されます。「画像をダウンロード」を選ぶと、フルサイズのファイルが生成され、ダウンロードされます。
- ベースグラデーションのCSSが必要な場合は、「ベースグラデーションCSSをコピー」を選択します。「全画面表示」でシーンを拡大し、「コントロールを非表示」でコントロールを画面から隠すか、「リセット」で最初からやり直します。Fキーで全画面表示、Rキーでリセット、Escapeキーで全画面表示を終了できます。
こんなときに便利
- デスクトップの壁紙を作成する：一般的なディスプレイの縦横比に合わせるには、1920x1080や3840x2160などのワイド画面解像度を選びます。
- スマートフォンの背景を作成する：縦長の構図には、縦向きの1080x1920を選びます。
- 正方形のグラフィック背景を用意する：正方形のキャンバスには1080x1080を選びます。
- 色の組み合わせを試す：書き出したファイルを何度も編集する代わりに、ダウンロード前にメインカラーとグラデーションの停止点を調整します。
- 色の境界がくっきりした背景を作る：停止点を同じ位置に配置すると、意図的に明確な境界を作れます。
- おなじみの設定から始める：グラデーションプリセットでSeaまたはDuskを選び、シードからバリエーションを生成します。
- ウェブデザインにグラデーションを加える：ベースグラデーションCSSをコピーし、背景スタイルの出発点として使います。
よりよいグラデーション背景を作るためのヒント
色を細かく調整する前に、出力する画像の形を決めましょう。ワイド画面のプレビューでバランスよく見えるグラデーションも、縦長や正方形の画像では印象が異なることがあります。特定のキャンバスサイズが決まっている場合は、「カスタム」を選び、幅と高さを入力してください。
| 設定 | 影響する内容 |
|---|---|
| グラデーション角度（度） | 線形グラデーションの方向を設定します。 |
| グラデーションの停止点 | ブレンドの色や変化を調整できます。同じ位置に停止点を置くと、くっきりした境界ができます。 |
| 画像形式 | PNG、JPG、WEBPを選べます。JPGとWEBPではピクセル値が変わる場合があります。 |
| 出力解像度 | ダウンロードする画像の寸法を設定します。8Kへの対応はデバイスによって異なります。 |
プレビューは小さな表示にすぎません。「画像をダウンロード」を選択すると、フルサイズの画像が生成されます。CSSで実装する場合は、「ベースグラデーションCSSをコピー」で取得できるのはベースのグラデーションのみであり、追加のパターン、テキスト、図形は含まれない点に注意してください。
知っておきたい制限
グラデーション背景ジェネレーターではダウンロード可能な画像を作成できますが、どのディスプレイやブラウザーでも結果が同じように見えることを保証するものではありません。特に停止点でくっきりした境界を作る場合、キャンバスとCSSでは端の描画に違いが出ることがあります。また、JPGとWEBPではピクセル値が変わる場合があるため、ピクセル値を正確に保つ必要がある場合はPNGを選んでください。
出力できる最大サイズは33,177,600ピクセルです。非常に大きな画像の書き出しはデバイスの性能に左右され、すべてのデバイスで8Kが使えるとは限りません。大きな画像のダウンロードに時間がかかる場合や失敗する場合は、解像度を下げるか、カスタム寸法を小さくしてください。色の正確さが重要な作業では、使用するソフトウェアと対象のディスプレイで書き出した画像を確認してください。
