CSSグラデーション生成
CSSのグラデーション背景（linear-gradient／radial-gradient）を、タイプ・角度・2色を選ぶだけで組み立てられます。プレビューと background のCSSがその場で更新され、「コピー」でそのまま貼り付けられます。3色以上やカラーストップの指定にも出力を少し足すだけで対応でき、処理はすべてブラウザ内で完結します。
タイプ・角度・2色を選ぶ手順
タイプ（linear / radial）・角度・2色を選ぶか、例チップを選びます。プレビューと background のCSSが同時に更新されるので、コピーして要素のCSSに貼り付けます。radialのときは角度欄は自動的に隠れます。
各オプションの意味
- タイプ：linearは直線方向に、radialは中心から外側へ色が変化します。
- 角度（deg）：linear専用です。0degが下→上、90degが左→右、180degが上→下、135degが左上→右下になります。
- 色1・色2：グラデーションの開始色と終了色です。カラーピッカーで選べます。
- カラーストップ（応用）：出力にカンマで色を足し、各色に % を付けると変化の位置を細かく制御できます。
具体例
- brand→cyan（斜め） →
background: linear-gradient(135deg, #ea6379, #7fcfd6) - 横方向（角度90deg） →
background: linear-gradient(90deg, #ea6379, #7fcfd6) - 縦方向（角度180deg） →
background: linear-gradient(180deg, #f3cf76, #84cfa0) - radial（中心から） →
background: radial-gradient(circle, #ffffff, #1a1a2e)
こんな場面で便利です
- ボタンやヒーローの背景を、単色より華やかに見せたいとき。
- カードやバナーの下地に、さりげない奥行きを出したいとき。
- ダーク基調のUIで、radialの中心光をアクセントにしたいとき。
background-clip: textと組み合わせ、見出しをグラデーション文字にしたいとき。- スケルトン表示やプレースホルダの下地に使いたいとき。
角度と向きの対応
CSSの角度は「上向き」を0degとして時計回りに増えます。指定した角度は「色が変化していく方向」を表すので、0degなら下から上へ色が変わります。キーワードでも書けるので、可読性を優先するなら 90deg を to right、180deg を to bottom に置き換えても同じ結果になります。
| 角度 | 色の流れ | 同じ意味のキーワード |
|---|---|---|
| 0deg | 下 → 上 | to top |
| 45deg | 左下 → 右上 | to top right |
| 90deg | 左 → 右 | to right |
| 135deg | 左上 → 右下 | to bottom right |
| 180deg | 上 → 下 | to bottom |
| 270deg | 右 → 左 | to left |
角度欄を空にすると0degとして扱われます。radialを選ぶと角度は使わないので入力欄が隠れます（選んだタイプはこの端末のブラウザ内に記憶されます）。
中間色が濁るときの対処
2色を指定すると、その間は機械的に補間されます。色相が離れた2色（たとえば赤系と水色系）では、中間で彩度が落ちて灰色っぽい帯が現れます。CSSの既定の補間がsRGBの直線的な混色で行われるためで、ツールの不具合ではありません。対処は主に2つあります。
- 中間に色を1つ挟む：出力にカンマで色を足し、
linear-gradient(135deg, #ea6379, #f3cf76, #7fcfd6)のように彩度の高い色を経由させます。もっとも確実で、対応環境も選びません。 - 補間する色空間を指定する：
linear-gradient(in oklab, #ea6379, #7fcfd6)のように書くと、知覚的に均等な色空間で混色され、濁りが目立ちにくくなります。角度と併記もできます。比較的新しい記法なので、古い環境も対象にする場合は単色のbackground-colorを先に書いてフォールバックさせてください。
radialの書き換え（楕円・中心の移動・大きさ）
このツールが出すradialは中央から広がる円（circle）に固定です。次のように出力を書き換えれば、より細かい形が指定できます。
radial-gradient(ellipse, #ffffff, #1a1a2e)… 要素の縦横比に合わせた楕円になります（ellipseは既定の形）。radial-gradient(circle at 50% 0%, #ffffff, #1a1a2e)… 中心を上端に移動。ヒーローの上部だけを光らせる表現に使えます。radial-gradient(circle closest-side, ...)… いちばん近い辺で色が終わります。farthest-corner（既定）にすると隅まで伸びます。
なお、ストライプを作る repeating-linear-gradient や、円グラフ状の conic-gradient はこのツールの出力対象外です。必要な場合は関数名と引数を手で書き換えてください。
グラデーションの上に文字を置くときの注意
グラデーションは場所によって明るさが変わるため、文字色のコントラストは「最も薄い部分」と「最も濃い部分」の両方で確認する必要があります。中央では読めても端で読めない、という状態が起きやすいところです。判定に使う値はコントラスト比チェッカーで、両端の色それぞれについて調べてください。読みやすさを確保しにくい場合は、文字の背後だけ半透明の単色を敷くか、グラデーションの振れ幅を狭めるのが確実です。単色の候補を探すなら配色ジェネレーターも使えます。