CSS Gradient Generator

このツールについて

CSSグラジエントジェネレーターは、CSSに直接貼り付けられるスムーズな多色グラジエントを作成します。線形（方向性）とラジアル（円形）グラジエントをサポートし、カラーストップを自由に追加できます。

カラーストップはグラジエント軸に沿って各色の開始・終了位置を定義します。角度スライダーで線形グラジエントの方向を0°〜360°で回転できます。

使い方

1. LinearまたはRadialグラジエントタイプを選択してください。
2. 線形グラジエントは角度スライダーで方向を調整してください。
3. カラースウォッチをクリックして色を変更し、スライダーで位置を調整してください。
4. + 追加ボタンでストップを追加し、✕で削除してください。
5. コピーボタンをクリックしてCSSのbackground宣言をコピーしてください。

活用事例

Webデザイナーが画像の代わりにCSSグラジエントでヒーローセクションの背景を作成します。ブランドチームがコーポレートカラーに合わせたグラジエントパレットを生成します。開発者がカード、ボタン、オーバーレイのプロトタイピングに使用します。

よくある質問

• 線形グラジエントとラジアルグラジエントの違いは？ — 線形グラジエントは指定した角度の直線に沿って色が変化します。ラジアルグラジエントは中心点から外側に向かって色が広がります。
• 3色以上使えますか？ — はい。+ 追加ボタンで必要なだけカラーストップを追加できます。各ストップには固有の色と位置があります。
• 生成されたCSSはクロスブラウザ対応ですか？ — はい。linear-gradient()とradial-gradient()関数はベンダープレフィックスなしで全ての最新ブラウザで完全サポートされています。