CSSグラデーションジェネレーター
グラデーションの種類（線形/円形）を選び、角度や形状、カラーストップ（色と位置%）を調整すると、プレビューと生成されるCSSがリアルタイムに更新されます。カラーストップは2〜6個まで追加・削除でき、「カラーストップを追加」ボタンを押すと既存のカラーストップの間で最も広い隙間の中央に新しいカラーストップが挿入されます。生成されたbackground宣言はコピーボタンでそのままクリップボードにコピーできます。カラーコードの形式変換には カラーコード変換 もあわせてご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
カラーストップ
カラーストップは2〜6個まで設定できます。
プレビュー
注意事項
- カラーストップの位置（%）が重複・逆転していても、CSSのグラデーションとして解釈可能な順序（位置の昇順）に自動的に並べ替えてから出力します。
- 線形グラデーションの角度は、CSSの角度指定に準拠しています（0°は下から上、90°は左から右、180°は上から下）。
- 円形グラデーションでは中心位置は常に要素の中央（デフォルト）で生成されます。中心位置をずらしたい場合は、生成されたCSSの`radial-gradient(...)`の形状の後に`at ...`を追記して調整してください。
- 生成されるCSSは`background`プロパティへの指定です。背景画像と重ねたい場合などは、`background-image`に読み替えてご利用ください。
用語解説
グラデーション（gradient）
2色以上の色を滑らかに変化させながらつなぐ表現方法。CSSでは`background`などのプロパティに`linear-gradient()`や`radial-gradient()`という関数を指定して描画します。
線形グラデーション（linear-gradient）
指定した角度に沿って直線的に色が変化するグラデーション。CSSの`linear-gradient(90deg, 色1 0%, 色2 100%)`のように、角度とカラーストップのリストを指定します。
円形グラデーション（radial-gradient）
中心から外側に向かって円形または楕円形に色が広がるグラデーション。CSSの`radial-gradient(circle, 色1 0%, 色2 100%)`のように、形状とカラーストップのリストを指定します。
カラーストップ（color stop）
グラデーションの中で「この位置にはこの色を置く」と指定する点。位置は0%〜100%のパーセンテージで表し、複数のカラーストップの間は自動的に滑らかに補間されます。
よくある質問
線形グラデーションの角度はどの向きが基準ですか？
CSSの仕様に準拠しており、0°は下から上、90°は左から右、180°は上から下に向かうグラデーションになります。
カラーストップはいくつまで追加できますか？
2〜6個まで追加・削除できます。追加ボタンを押すと、既存のストップ間で最も空いている位置の中央に新しい色が入ります。位置が前後しても、出力時に自動で昇順へ並べ替えられます。
円形グラデーションの中心をずらすにはどうしますか？
このツールは中心を要素の中央で出力します。ずらしたい場合は、生成されたCSSのradial-gradient(...)の形状指定の後に「at 30% 40%」のように追記してください。
このページをシェア