プレビュー
グラデーションタイプ
角度・方向設定（Linear）
0～360。1単位ずつ増減、ダイヤルでも調整できます。
カラーストップ (2個)
生成されたCSSコード
プリセット見本
画面上で色や角度を選ぶだけで、Webサイトの背景などに使える美しいCSSグラデーションを作成できる無料ツールです。線形・円形・3色以上の複雑な配色にも対応しており、生成されたコードはコピペですぐに利用できます。
このツールでできること
このツールでは、CSS（スタイルシート）の知識がなくても、直感的な操作でグラデーションのスタイルコードを自動生成できます。主な機能は以下の通りです。
リアルタイムプレビューとコード生成 画面上のプレビューを見ながら色や方向を調整すると、自動的にCSSコード（backgroundプロパティ）が生成されます。完成したコードは「コピー」ボタンを押すだけでクリップボードに保存され、そのままWebサイトの実装に使えます。
線形・円形グラデーションの切り替え 一般的な上から下へ色が変化する「線形（Linear）」だけでなく、中心から外側へ広がる「円形（Radial）」のグラデーションもワンクリックで切り替え可能です。
3色以上のマルチカラー作成 2色だけでなく、3色以上の複数の色を使ったグラデーションも作成できます。「ストップ追加」ボタンで色を増やし、スライダーで色の変わる位置を細かく調整することで、虹色や複雑な光の表現も可能です。
豊富なプリセット（見本）の利用 「パステル」「ビビッド」「ダーク」など、デザインの参考になる配色見本（プリセット）を用意しています。見本をクリックするだけで設定が反映されるため、配色に悩んだ時のアイデア出しにも役立ちます。
CSSグラデーションの基礎知識
このツールが出力するCSSプロパティについての基本的な用語解説です。
linear-gradient（線形グラデーション） 色が直線的に変化するスタイルです。Webデザインで最も頻繁に使用されます。degree（deg）という単位で角度を指定でき、90degなら横方向、180degなら上から下へ色が変化します。
radial-gradient（円形グラデーション） 中心点から外側に向かって円状に色が広がるスタイルです。ボタンのハイライトや、背景に奥行きを持たせたい場合に使用されます。
RGBA（色の透明度） 色は赤（R）・緑（G）・青（B）に加え、透明度（A）で指定されます。このツールでは透明度も調整できるため、背景画像の上に半透明のグラデーションを重ねるといった表現のコードも作成できます。
3色グラデーションを綺麗に作るコツ
検索需要の高い「3色グラデーション」を美しく作成するためのポイントです。
同系色でまとめる 例えば「水色→青→濃紺」のように、同じ色相で明るさや濃さを変えた3色を並べると、空や海のような自然で美しい奥行きが生まれます。
真ん中の色をなじませる 「赤→黄色→青」のように全く違う色を混ぜる場合、中間に配置する色が濁って見えることがあります。その場合、スライダー上の色の位置を調整して、色が混ざり合う範囲を広げたり狭めたりすることで調整可能です。
ベンダープレフィックスについて
生成されたコードの下にある「ベンダープレフィックスを含める」にチェックを入れると、-webkit- や -moz- といった接頭辞がついたコードも同時に出力されます。 古いブラウザ（古いバージョンのAndroidブラウザなど）でもグラデーションを正しく表示させたい場合は、このオプションを利用してください。最新の主要ブラウザのみを対象とする場合は、標準のコードのみで問題ありません。
このツールが役立つときはどんなとき？
- Webサイトの背景デザイン: ページの背景全体に淡いグラデーションを敷き、洗練された印象を与えたいとき。
- ボタンやバナーの作成: フラットな単色ではなく、立体感やクリックしたくなる質感をボタンに持たせたいとき。
- 画像加工ソフトがないとき: Photoshopなどのソフトを開かずに、ブラウザ上で素早く配色のシミュレーションを行いたいとき。
- 配色のアイデアが欲しいとき: 「ランダム生成」機能やプリセットを使って、自分では思いつかない色の組み合わせを探したいとき。
