CSSグラデーション生成
カラーストップをビジュアルで調整してlinear・radial・conicグラデーションを作成し、CSSコードを一度にコピーできます。
カラーストップ
CSS
使い方
1
タイプを選択
linear(線形)・radial(円形)・conic(円錐形)の中から目的に合わせて選択してください。
2
カラーストップを追加
+ボタンでストップを追加し、スライダーで位置(0–100%)を調整します。各ストップはカラーピッカーで色を変更できます。
3
角度·コードコピー
linearは角度、radialは形と位置を調整できます。結果のCSSは一度にコピー可能です。
よくある質問
カラーストップは何個まで？
最大8個まで追加できます。視覚的にバランスのよいグラデーションは通常2〜4個で十分です。
conicグラデーションはすべてのブラウザに対応？
Chrome 69+、Safari 12.1+、Firefox 83+で対応しています。古いブラウザでは表示されない場合があります。
コードはどう使えばいい？
`background:`プロパティにそのまま貼り付けてください。CSS変数として使ったり、Tailwindの任意値`bg-[linear-gradient(...)]`内でも使えます。
透明度(アルファ)に対応？
はい。カラーピッカーで16進8桁(#RRGGBBAA)やrgba()を直接入力できます。
サーバーに送信されますか？
いいえ。すべての処理はブラウザ内で行われ、生成されたCSSが外部に送信されることはありません。
