CSSグラデーションジェネレーター
カラーストップと角度を決めると、グラデーションのCSSコードができあがります。
入力した文章やファイルはサーバーに送らず、このブラウザー内だけで処理します。
カラーストップ
バーの空いた所を押すとストップが増え、つまみをドラッグすると位置が変わります。
CSSコード
1行目のbackground-colorは、グラデーションを表示できない環境向けの平均色です。
使い方
- 種類（線形・円形・扇形）を選び、角度や中心の位置を決めます。
- バーの空いた所を押すか「ストップを追加」でカラーストップを増やし、つまみをドラッグするか%の欄に数字を入れて位置を調整します。
- ストップごとにカラーボックスで色を選べます。#rrggbbaa の形で入力すれば透明度も指定できます。
- 「CSSコード」をコピーして貼り付けます。「ランダム」で新しい組み合わせを試すこともできます。
よくある質問
linear・radial・conicの違いは何ですか？
linearは一方向に、radialは中心から外側へ円状に、conicは中心の周りを時計回りに色が変わります。conicは円グラフや色相環の表現に向いています。
角度0degはどちら向きですか？
linear-gradientでは0degが下から上、90degが左から右です。conicでは0degが12時の方向から始まります。
古いブラウザーでも表示されますか？
linearとradialはほぼすべてのブラウザー、conicは2020年以降のブラウザーで表示できます。表示できない環境では一緒に書いたbackground-colorが使われます。