CSS グラデーションを作り、宣言をそのままコピー
線形・放射状・扇形を選び、角度と各カラーストップを編集します。プレビューは出力パネルと同じ宣言を描画します。位置は 0〜100%、角度は 0〜360 度に収まり、ストップは 2〜8 個です。
ブラウザ内でローカルに実行 · 線形 · 放射状 · 扇形
線形・放射状・扇形を選び、角度と各カラーストップを編集します。プレビューは出力パネルと同じ宣言を描画します。位置は 0〜100%、角度は 0〜360 度に収まり、ストップは 2〜8 個です。
ブラウザ内でローカルに実行ワークベンチは linear-gradient(135deg, #0f9d66 0%, #2d5bff 55%, #7c3aed 100%) で開きます。プレビューはこの宣言をそのまま描画し、出力パネルも同じ文字列を表示するので、コピーしたコードは見ていたグラデーションと一致します。
各コントロールには実測した上限があります。角度は 0〜360 度、カラーストップの位置は 0〜100%、ストップ数は 2〜8 個です。範囲外の値は、プレビューが黙って使うのではなく、フィールドを離れた時点で上限・下限に書き戻されます。
ストップ 3 個、135 度、線形が読み込み時の値で、リセットもここへ戻します。出力は .gradient-background { background: … ; } の 1 宣言のみで、位置の昇順に並びます。0 と 55 の間に追加したストップは、最後に追加しても 55 より前に出力されます。
角度を使うのは linear-gradient() と conic-gradient() だけです。扇形は from 90deg at center、放射状は circle at center として出力され角度は付きません。位置はフィールドと同じ小数 1 桁で書き出されます。
グラデーションには最低 2 個のストップが必要です。2 個の状態で × を押すと、削除せずに「少なくとも 2 つのカラーストップが必要」と通知します。上限は 8 個で、8 個になるとカラーストップを追加ボタンが無効になり、何も起きないクリックではなくなります。
追加は既存ストップの最も広い間隔を分割するため、配色は均等に保たれます。初期状態から 4 個にすると 0、28、55、100%、最大の 8 個では 0、14、28、42、55、67、78、100% になります。ストップを反転は各位置を 100 から引き、リストの順も入れ替えます。出力は常に位置の昇順です。
ストップの色は 6 桁の HEX かカラーピッカーです。#fff のような 3 桁の短縮形は展開せず、直前の有効なグラデーションを保ったまま 6 桁を求めます。hsl() や rgba() を HEX 欄に入力した場合も同じように拒否されます。
画像・SVG・PNG の書き出し、不透明度や補間位置のスライダー、2 つ目のグラデーション層、自分のコンテナ幅でのプレビューはありません。出力パネルからコピーした宣言がこのツールの成果物です。