CSSグラデーション生成

CSSグラデーションは、複数の色をなめらかに変化させて背景に敷く機能です。画像を使わずに背景のグラデーションを表現できるため、ボタン・ヘッダー・カードの装飾などに広く使われます。本ツールは色や角度を調整しながらリアルタイムにプレビューし、貼り付けるだけで使える background プロパティ1行を生成します。

本ツールは linear-gradient（直線状）と radial-gradient（放射状）の2種類を生成します。例えば linear で角度90度・赤(#ff0000)を0%・青(#0000ff)を100%に置くと、background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%); のように出力されます。radial を選ぶと background: radial-gradient(circle, ...) の形式になります。

linear-gradient の角度（deg）はグラデーションの向きを表し、0degが下から上、90degが左から右、180degが上から下、270degが右から左です。本ツールでは0〜360degのスライダーで指定できます。radial-gradient は中心から外側へ放射状に広がるグラデーションで、本ツールでは circle（円形）の形状で生成します。

各色には 0〜100% の位置（カラーストップ）を指定でき、その色がもっとも濃く出る位置を表します。例えば赤を0%・青を100%にすると左端が赤・右端が青になり、その間がなめらかに変化します。位置を 40%・60% のように近づけると境界がくっきりし、0%・100% のように離すとなだらかに変化します。

色は2色を基本とし、「3色目を使う」をオンにすると3色まで扱えます。例えば赤0%・黄50%・青100%のように中間色を挟むと、虹のような多色グラデーションになります。生成されるのは background プロパティ1行なので、そのままCSSに貼り付けて使えます。

注意点として、本ツールは circle 形状の radial-gradient と単一方向の linear-gradient に対応しており、楕円(ellipse)指定や conic-gradient、複数グラデーションの重ね掛けには対応していません。これらが必要な場合は、生成したCSSを土台に手動で書き換えてください。