グラデーションの作り方・使い方

CSSグラデーションは linear-gradient()・radial-gradient()・conic-gradient() の3種類が基本です。本ツールは一覧からプリセットを選び、モーダルで色の位置（カラーストップ）を微調整して、CSSとTailwindの両方のコードをそのままコピーできます。

3種類のグラデーションの違い

• linear（線形）：直線方向に色が変化。角度で向きを指定します。ボタンや見出し背景の定番。
• radial（放射）：中心から外側へ放射状に変化。スポットライトや柔らかい背景に向きます。
• conic（扇形）：中心を軸に角度方向へ変化。円グラフ風の表現やカラーホイールに使えます。

使い方

1. 一覧からプリセットを選ぶ（または「新規作成」で白紙から）。
2. モーダルでカラーストップのバーをクリックして色を追加し、つまみをドラッグして位置を調整。つまみのダブルクリックで削除できます。
3. 選択中のストップの色は、カラーピッカーまたは色の辞書から指定。
4. 種別（線形・放射・扇形）と角度・形状を調整。
5. CSS / Tailwind を切り替えてコードをコピー、または画像が必要ならPNGで書き出し。

和グラデーションと色の辞書連携

茜・藤・群青・桜・紅葉といった日本の伝統色を使った和グラデーションのプリセットを273種類用意しています。色相順に並んでいるので、目的の色合いを探しやすくなっています。さらに「色の辞書から選ぶ」では、色の辞書に収録した伝統色とCSS名前付き色を直接ストップに適用できるので、配色の意図を保ったままグラデーションに落とし込めます。

よくある質問

関連ツール