グラデーションジェネレーター
CSSグラデーションを視覚的に作成およびプレビューします。
グラデーション設定
グラデーションの種類と方向を設定します
カラーストップ
グラデーションの色と位置を設定します
%
%
プリセット
定義済みのグラデーションを試してください
プレビュー
生成されたグラデーションを表示します
生成されたCSS
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);グラデーションの種類の詳細
線形グラデーション
直線方向に色が変化するグラデーション。角度を調整して方向を設定できます。
放射状グラデーション
中心点から円形または楕円形に外側に向かって色が変化するグラデーション。
円錐グラデーション
中心点を中心に回転しながら色が変化する円錐形のグラデーション。