CSSグラデーションジェネレーター
linear、radial、conic に対応。カラーストップは6点まで。
background: linear-gradient(135deg, #ff7a45 0%, #d8401f 55%, #7c2d12 100%);
/* Tailwind */
bg-[linear-gradient(135deg,#ff7a45_0%,#d8401f_55%,#7c2d12_100%)]中間色が濁らないグラデーションを
グラデーションはCSSだけで完結する数少ない「画像の代わり」です。画像ファイルを用意する必要がなく、 どんな解像度でも劣化せず、ファイルサイズもほぼゼロ。色を変えたくなったら1行書き換えるだけで済みます。
How to use it
-
種類を選ぶ
方向のある linear、中心から広がる radial、中心を回る conic の3種類から選びます。
-
角度を決める
0deg が上向きで時計回りに増えます。90deg は左から右、180deg は上から下です。
-
カラーストップを編集する
トラック上のハンドルをクリックして選び、色・位置・透明度を設定します。最大6点まで追加できます。
-
コードをコピーする
CSSの background 宣言、または Tailwind の任意値としてコピーできます。
中間色が濁る問題と oklch
青から黄色のように補色に近い2色をつなぐと、中間がグレーっぽく濁って見えることがあります。
これはブラウザが既定でsRGB空間を直線的に補間するためで、デザインツールで作った見た目と食い違う
原因にもなります。in oklch を指定すると知覚的に均等な色空間で補間され、
中間の彩度が保たれます。このツールは両方のコードを出力するので、実際に見比べてから選べます。
写真の上に敷くオーバーレイ
ヒーロー画像の上に文字を載せるとき、透明から不透明へのグラデーションを一枚重ねると、 写真の情報量を残したまま文字のコントラストを確保できます。全体を均一に暗くするより自然で、 WCAGのコントラスト比も満たしやすくなります。
conic-gradient の使いどころ
conic-gradient は中心を軸に角度方向へ色が回るグラデーションです。
ライブラリを使わずに円グラフやカラーホイール、進捗リングを描けます。
from で開始角度を、ハードストップ（同じ位置に2つの色を置く）で
くっきりした区切りを作れます。
関連ツール
要素の枠線や角の丸みも調整したい場合は border-radius ジェネレーター、 影を重ねたい場合は box-shadow ジェネレーター が使えます。 レイアウト全体を組むなら CSSグリッドジェネレーター をどうぞ。
Frequently asked questions
CSSでグラデーションを作るにはどうすればいいですか？
background プロパティに linear-gradient()、radial-gradient()、conic-gradient() のいずれかを指定します。画像ファイルは不要で、CSSだけで完結します。このツールでは色と位置を画面上で調整し、そのままコードをコピーできます。linear-gradient の角度はどう指定しますか？
0deg が上向きで、そこから時計回りに増えていきます。90deg は左から右、180deg は上から下です。to right のようなキーワードでも指定できますが、角度のほうが細かく制御できます。グラデーションの途中が濁って見えるのはなぜですか？
in oklch を指定すると知覚的に均等な色空間で補間され、中間色の彩度が保たれます。このツールは両方を出力するので違いを比較できます。radial-gradient と conic-gradient の違いは何ですか？
radial-gradient は中心から外側へ広がる円形または楕円形のグラデーションで、光やスポットライトの表現に向きます。conic-gradient は中心を軸に角度方向へ回転するもので、円グラフやカラーホイールの表現に使えます。グラデーションに透明度を設定できますか？
rgb(0 0 0 / 0.5) のように半透明にできます。写真の上に敷くオーバーレイでは、透明から不透明へのグラデーションがよく使われます。ブラウザの対応状況はどうなっていますか？
linear-gradient と radial-gradient はすべての現行ブラウザで長年サポートされており、ベンダープレフィックスは不要です。conic-gradient も Chrome 69、Safari 12.1、Firefox 83 以降で使えます。