CSSグラデーションジェネレーター

使い方

1. 「種類」で線形（linear）・円形（radial）・扇形（conic）を選びます。プリセットから始めることもできます。
2. 線形は角度をスライダー・数値・方向ボタンで、円形は形と中心の位置を、扇形は開始角度と中心の位置を指定します。
3. カラーストップごとに色（ピッカーまたはHEX・rgb()・hsl()）、不透明度、位置（%）を入力します。「ストップを追加」で最大8個まで増やせます。
4. プレビューを確認し、CSS（background または background-image）か Tailwind CSS のクラスをコピーします。

注意事項

• カラーストップは2〜8個です。1つのストップに2つの位置を書く書き方や、色の中間点（ヒント）の指定には対応していません。
• 出力ではストップを位置の小さい順に並べ替えます。同じ位置のストップは一覧の順のままです。
• 半透明の色は #rrggbbaa（8桁HEX）で出力します。現在の主要ブラウザは対応していますが、古いブラウザでは表示されないことがあります。
• 円形のサイズ指定（closest-side など）や繰り返しグラデーション（repeating-）、複数のグラデーションの重ね合わせは作れません。
• Tailwindの出力は任意値（arbitrary value）のクラスで、v3.0以降とv4向けです。from-・via-・to- のユーティリティには変換しません。

計算・変換の仕組み

線形は linear-gradient(角度, 色 位置, …)、円形は radial-gradient(形 at 位置, …)、扇形は conic-gradient(from 角度 at 位置, …) の形で出力します。

角度は0〜360の整数、位置は0〜100%（小数第1位まで）に丸めます。CSSの角度は0度が上向きで、時計回りに増えます。

Tailwindのクラスは、カンマの後の空白を取り除き、残りの空白を _ に置き換えて bg-[…] の形にします。値に _ や引用符などが含まれる場合は出力しません。