CSSグラデーション生成
線形・放射状・円錐グラデーションを視覚的に作成し、CSSコードを取得
プレビュー
タイプ・方向
0°90°180°270°360°
カラーストップ
1
0%
2
100%
CSSコード
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
プリセット
使い方
線形グラデーション (linear-gradient)
指定した角度に沿って色が変化します。Webデザインで最も一般的に使用されるグラデーションです。
放射状グラデーション (radial-gradient)
中心から外側に向かって色が変化します。円形または楕円形を選択できます。
円錐グラデーション (conic-gradient)
中心点を軸に回転するように色が変化します。円グラフのような表現に適しています。
カラーストップ
グラデーションの各色の位置を0%〜100%で指定します。ストップを追加してより複雑なグラデーションを作成できます。