CSSグラデーション生成
linear / radial / conic のグラデーションをカラーストップを編集しながら作成し、CSS をコピーできます。角度・中心位置・色の追加や削除に対応し、プリセットとランダム生成も利用できます。すべてブラウザ上で動作。
プリセット
方向
カラーストップ
ヒント: 色を決めきれないときは「ランダム」で近い色相の配色を作り、そこから微調整すると早く決まります。単色の指定は カラーコード変換、文字色との組み合わせは コントラストチェッカー もご利用ください。
使い方・詳細情報
このツールの使い方
- 「プリセット」から近いものを選ぶか、「ランダム」で配色を作ります
- 種類（linear / radial / conic）をタブで切り替えます
- linear は角度、radial と conic は中心位置（conic は開始角度も）を指定します
- 「カラーストップ」で色と位置（%）を調整します。「色を追加」で最大8つまで増やせます
- プレビューを確認しながら、下部の CSS をコピーして使います
グラデーションの種類
| 種類 | 説明 |
|---|---|
| linear | 直線方向に色が変化します。角度で向きを指定し、0deg が上向き、90deg が右向きです。ヒーロー背景やボタンなど最も使う場面が多い形です |
| radial | 中心から外側へ円・楕円状に広がります。スポットライトのような表現に向きます |
| conic | 中心を軸に角度方向へ色が回ります。円グラフ風の装飾やカラーホイールに使えます |
カラーストップの考え方
- カラーストップは「どの位置（%）でどの色になるか」の指定です。位置のあいだは自動的に補間されます
- 同じ位置に2つの色を置くと、なめらかに変化せずくっきりした境目になります（ストライプ表現に使えます）
- 位置を入れ替えても、CSS 出力時には位置の小さい順に並べ替えます
- 色数を増やすほど階調は複雑になりますが、2〜3色に抑えたほうが扱いやすい仕上がりになります
ブラウザ対応について
- 出力にベンダープレフィックス（
-webkit-等）は付けていません。linear-gradient/radial-gradientは主要ブラウザで長く標準サポートされており、現行の対応環境では不要なためです conic-gradientは比較的新しい機能です（Chrome / Edge / Firefox / Safari のいずれも対応済み）。古い環境も対象にする場合は、単色のbackground-colorをフォールバックとして併記することをおすすめします
仕様
- すべてブラウザ上で動作します（入力内容はサーバーに送信されません）
- 色は HEX（
#RRGGBB）で扱います。透明度が必要な場合は、出力後にrgba()へ書き換えてご利用ください - カラーストップは 2〜8 個です