CSSグラデーションジェネレーター
ビジュアルエディターでCSSグラデーションコードを即座に生成。
0%
100%
プレビュー
CSSコード
background: linear-gradient(to bottom right, #6366f1 0%, #ec4899 100%);
CSSグラデーションとは？
CSSグラデーションは画像なしにブラウザで直接レンダリングされる色の遷移効果です。背景・ボーダー・UIエフェクトなどに幅広く使われます。
CSSグラデーションの種類
リニアグラデーション
指定した角度や方向に沿って直線的に色が変化します。linear-gradient()で定義します。
ラジアルグラデーション
中心点から外側へ円形または楕円形に色が広がります。radial-gradient()で定義します。
コニックグラデーション
円グラフのように中心点を軸に回転しながら色が変化します。conic-gradient()で定義します。
使い方
グラデーションタイプ（Linear・Radial・Conic）を選択し、方向や角度を調整してください。カラーストップを追加・削除してグラデーションを作成し、CSSコードをコピーします。
CSSグラデーション活用ヒント
透明効果にはrgba()または8桁のhexコードを使用します。コンマ区切りで複数のグラデーションを重ねることができます。
よくある質問
CSSグラデーションとは何ですか？
CSSグラデーションは画像ファイルなしに、linear-gradient()・radial-gradient()・conic-gradient()関数で色の遷移を表現するCSS機能です。
LinearとRadialグラデーションの違いは？
Linearは直線方向に色が変化し、Radialは中心点から円形または楕円形に広がります。
グラデーションに透明度を加えるには？
rgba()カラー値（例：rgba(255,0,0,0.5)）または8桁のhexコード（例：#ff000080）をカラーストップに使用します。
conic-gradientは全ブラウザで使えますか？
Chrome 69+、Firefox 83+、Safari 12.1+など、すべての最新ブラウザで対応しています。
複数のグラデーションを重ねられますか？
はい。backgroundプロパティでコンマ区切りにより、複数のグラデーションを1つの要素に重ねられます。
グラデーションのテキストはどう作りますか？
backgroundにグラデーションを設定し、-webkit-background-clip: textとcolor: transparentを使うとテキストにグラデーションが表示されます。
カラーストップとは何ですか？
カラーストップはグラデーションパス上の特定の位置（%）で特定の色を指定するポイントです。