CSSグラデーション生成
線形・放射状グラデーションを組み立て、ライブプレビューとCSSを出力します。
使い方
タイプ（linear / radial）・角度・2色を選ぶか、例チップを選びます。プレビューと background のCSSが同時に更新されるので、コピーして要素のCSSに貼り付けます。radialのときは角度欄は自動的に隠れます。
具体例
- brand→cyan（斜め） →
background: linear-gradient(135deg, #ea6379, #7fcfd6) - 横方向（角度90deg） →
background: linear-gradient(90deg, #ea6379, #7fcfd6) - 縦方向（角度180deg） →
background: linear-gradient(180deg, #f3cf76, #84cfa0) - radial（中心から） →
background: radial-gradient(circle, #ffffff, #1a1a2e)
よくある質問
入力データはサーバーに送信されますか？
いいえ。処理はすべてブラウザ内で完結し、外部に送信・保存されません。
linearとradialの違いは？
linearは角度方向に色が変化し、radialは中心から外側に広がります。例: linear-gradient(135deg, #ea6379, #7fcfd6) / radial-gradient(circle, #ffffff, #1a1a2e)。
角度（deg）はどう決めますか？
linear-gradientの角度は0degが下から上、90degが左から右、180degが上から下です。斜めに流したいときは135deg（左上→右下）がよく使われます。
出力したCSSはどこに貼りますか？
出力は background プロパティです。要素のCSSに background: linear-gradient(...); の形で貼り付ければそのまま背景になります。3色以上にしたいときは出力にカンマで色を追加します（例: linear-gradient(135deg, #ea6379, #f3cf76, #7fcfd6)）。