🌈
CSSグラデーション生成
Linear・Radial・Conicの3種類のCSSグラデーションを視覚的に作成。カラーストップ自由追加、20種プリセット付き。
0°90°180°270°360°
0%
100%
CSS出力
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);🌈 プリセット（20種）
CSSグラデーション生成ツールの使い方
グラデーションタイプ（Linear・Radial・Conic）を選び、カラーストップの色と位置を調整するだけでCSS文字列が即座に生成されます。 コピーボタンでクリップボードにコピーし、CSSファイルにそのまま貼り付けて使えます。
3種類のグラデーション
Linear（線形）は角度を指定して直線方向に色が変化します。ヘッダー背景やボタンに最適。Radial（放射状）は中心から円状に広がり、スポットライト効果や丸いアイコンに使われます。Conic（円錐）は回転方向の色変化で、円グラフ風のデザインやカラーホイールに活用できます。
プリセットと活用シーン
サンセット・オーシャン・ゴールドなど20種類のプリセットからすぐに始められます。 Webバナー・SNSカバー画像・UIカード・ボタンのホバーエフェクトなど、様々な場面で活用できます。