CSSを1行も書かずに完璧なグラデーションを
グラデーションはモダンデザインのいたるところにあります。ヒーロー背景、ボタン、カード、装飾テキストなど。このジェネレーターなら色・位置・角度・種類を視覚的に組み立てて、本番でそのまま使えるクリーンなCSSコードをコピーできます。
-
種類を選ぶ
方向性のある変化には線形、中央のハロー効果には放射、ホイールや円グラフ風には円錐を。
-
色と位置を調整
ピッカーで各色を変更し、スライダーで位置を動かし、最大6ストップまで追加。ランダムボタンは調和の取れた組み合わせを提案します。
-
CSSをコピー
コードはリアルタイムで更新。ワンクリックでクリップボードへ。
3つの関数、3つのジオメトリ
| 関数 | ジオメトリ | 典型的な用途 |
|---|---|---|
| linear-gradient(角度, …) | 方向を持つ直線 | 背景、ボタン、オーバーレイ |
| radial-gradient(circle, …) | 同心円 | ハロー、スポットライト、ビネット |
| conic-gradient(from 角度, …) | 中心の周りの回転 | 円グラフ、色相環、アニメーション枠線 |
美しいグラデーションのコツ
- 近い色相（類似色）でまとめると滑らかな仕上がりに。反対色は途中でくすんだグレーを通ります。
- テキストのグラデーションにはbackground-clip: textとcolor: transparentを組み合わせます。
- 広い面では、わずかなノイズを加えると縞模様（バンディング）を防げます。
- コントラストに注意：グラデーション上のテキストは全色域で読めることが必要です。
生成コードは互換性を最大化するため16進カラーを使用しています。プロジェクトではCSS変数（var(--my-color)）に置き換え可能です。
よくある質問
linear・radial・conicの違いは？
linear-gradientは角度に沿って直線的に変化し、radial-gradientは中心から外へ放射し、conic-gradientは色相環のように中心の周りを回転します。3つとも同じ色リストを使えます。
色はいくつまで使えますか？
このツールは最大6つのストップに対応し、ほとんどの用途をカバーします。純粋なCSSでは無制限ですが、4〜5色を超えるとコントロールが難しくなります。
色の横のパーセントは何を意味する？
グラデーション軸上のストップ位置です。0％が始点、100％が終点。近い2つのストップはくっきりした境界を、離れた2つはなだらかなブレンドを作ります。
生成されたコードはすべてのブラウザで動く？
linear-gradientとradial-gradientは長年すべての環境でサポートされています。conic-gradientもモダンブラウザ全般（Chrome 69+、Firefox 83+、Safari 12.1+）で利用可能です。
CSSグラデーションをアニメーションさせるには？
グラデーション自体は直接アニメーションできませんが、2つの手法が有効です。拡大したグラデーション（background-size: 200%）のbackground-positionを動かす方法と、@propertyで登録したカスタムプロパティ経由で色を動かす方法です。