CSSグラデーションジェネレーター
Webサイト背景とUI要素に美しいグラデーションをデザイン。
色、角度、位置を視覚的に編集し、CSSコードを即座にコピー。 100%無料 — 登録不要。
background: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%); 一般的な使用例
プロジェクトでCSSグラデーションを使う場所と方法
ヒーロー背景
スムーズなカラートランジションで目を引くヒーローセクションを作成。グラデーションはランディングページに深みと視覚的興味を追加。
ボタン効果
グラデーション背景とホバー効果でボタンを目立たせる。プレミアムでモダンな見た目のCTAを作成。
テキストグラデーション
素晴らしいタイポグラフィ効果のためにテキストにグラデーションを適用。見出し、ロゴ、アクセントテキストに最適。
カードオーバーレイ
画像やカードにグラデーションオーバーレイを追加してテキストの読みやすさと視覚的深みを改善。
CSSグラデーションの仕組み
CSSグラデーションは2つ以上の指定された色間のスムーズな遷移を表示可能。画像と違い、グラデーションはブラウザが生成し、任意の解像度で完璧にスケール。
グラデーションの種類
- 線形グラデーション: 直線に沿って色が遷移。角度またはキーワードで方向を制御。
- 放射状グラデーション: 中心点から外側に色が放射。円形または楕円形を作成可能。
- 円錐グラデーション: 中心点の周りで色が回転（カラーホイールのように）。円グラフや角度効果に最適。
カラーストップ
グラデーション内の各色を「カラーストップ」と呼ぶ。各色がどこに表示されるかをパーセンテージ（0%〜100%）または固定長で指定可能。
CSSグラデーション構文＆例
異なるグラデーションタイプ用のコピペ可能なコード例
/* Basic horizontal gradient */
.element {
background: linear-gradient(90deg, #3B82F6, #9333EA);
}
/* Diagonal gradient */
.element {
background: linear-gradient(45deg, #ff6b6b, #feca57);
}
/* Multiple color stops */
.rainbow {
background: linear-gradient(
90deg,
#ff0000 0%,
#ff7f00 17%,
#ffff00 33%,
#00ff00 50%,
#0000ff 67%,
#4b0082 83%,
#9400d3 100%
);
}/* Circle from center */
.element {
background: radial-gradient(circle, #3B82F6, #1E3A8A);
}
/* Ellipse at specific position */
.element {
background: radial-gradient(
ellipse at top left,
#ffecd2 0%,
#fcb69f 100%
);
}
/* Multiple layers for depth */
.glassmorphism {
background: radial-gradient(
circle at 30% 30%,
rgba(255,255,255,0.3) 0%,
transparent 70%
);
}よくある質問
線形グラデーションと放射状グラデーションの違いは？
線形グラデーションは直線に沿ってスムーズなカラー遷移を作成。放射状グラデーションは中心点から外側に放射するカラー遷移を作成。
斜めグラデーションを作成するには？
linear-gradient関数で角度値を使用。例：linear-gradient(45deg, #ff0000, #0000ff)は左下から右上へのグラデーションを作成。
テキストにグラデーションを適用できますか？
はい！グラデーションを背景として設定し、background-clip: textと-webkit-text-fill-color: transparentを使用してテキストを通してグラデーションを見えるように。
CSSグラデーションはすべてのブラウザでサポート？
CSSグラデーションは優れたブラウザサポート（グローバルで98%以上）を持つ。すべてのモダンブラウザはプレフィックスなしでグラデーションをサポート。IE9以下のみフォールバックが必要。