CSSグラデーションの使い方完全ガイド｜linear・radial・conicの違いと実践デザイン例

CSSグラデーションの基本

CSSグラデーションは、2色以上のカラーを滑らかに遷移させて表現する方法です。画像を使わずにリッチなビジュアルを実現できるため、ウェブデザインに欠かせない技術です。

CSSグラデーションには主に3種類あります：

1. linear-gradient（線形グラデーション）
2. radial-gradient（放射状グラデーション）
3. conic-gradient（扇形グラデーション）

1. linear-gradient（線形グラデーション）

直線的に色が変化するグラデーションです。

基本構文

background: linear-gradient(方向, 色1, 色2, ...);

方向の指定方法

/* to bottom（上から下、デフォルト） */background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);/* to right（左から右） */background: linear-gradient(to right, #667eea, #764ba2);/* 角度指定（45度） */background: linear-gradient(45deg, #f093fb, #f5576c);/* to bottom right（左上から右下） */background: linear-gradient(to bottom right, #4facfe, #00f2fe);

カラーストップの指定

/* 開始・終了位置を指定 */background: linear-gradient(to right,   #ff6b6b 0%,  #ff6b6b 30%,  #4ecdc4 70%,  #4ecdc4 100%);/* 3色グラデーション */background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

実践例：よく使われるlinear-gradient

/* おしゃれなサンセット風 */.sunset {  background: linear-gradient(to bottom, #fc4a1a, #f7b733);}/* クールなブルー系 */.ocean {  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);}/* ソフトなパステル */.pastel {  background: linear-gradient(to right, #ffecd2, #fcb69f);}

CSSグラデーションジェネレーターCSSグラデーション視覚的作成・カスタマイズ

2. radial-gradient（放射状グラデーション）

中心から外側に向かって放射状に色が変化するグラデーションです。

基本構文

background: radial-gradient(形状 サイズ at 位置, 色1, 色2, ...);

形状の種類

/* 円形（circle） */background: radial-gradient(circle, #ff6b6b, #4ecdc4);/* 楕円形（ellipse、デフォルト） */background: radial-gradient(ellipse, #667eea, #764ba2);

サイズの指定

/* closest-side: 最も近い辺まで */background: radial-gradient(circle closest-side, #ff6b6b, #4ecdc4);/* farthest-corner: 最も遠い角まで（デフォルト） */background: radial-gradient(circle farthest-corner, #667eea, #764ba2);

位置の指定

/* 左上から放射 */background: radial-gradient(circle at top left, #ff6b6b, #4ecdc4);/* 特定の座標から放射 */background: radial-gradient(circle at 30% 70%, #f093fb, #f5576c);

実践例：radial-gradient

/* スポットライト効果 */.spotlight {  background: radial-gradient(circle at center,     rgba(255, 255, 255, 0.3) 0%,     transparent 70%  ), #1a1a2e;}/* グロー効果 */.glow {  background: radial-gradient(circle at 50% 50%,     #ff6b6b 0%,     #ff6b6b 20%,     transparent 60%  );}

3. conic-gradient（扇形グラデーション）

中心点を軸に、円の周りを回転しながら色が変化するグラデーションです。

基本構文

background: conic-gradient(from 角度 at 位置, 色1, 色2, ...);

実践例：conic-gradient

/* 円グラフ（パイチャート）風 */.pie-chart {  width: 200px;  height: 200px;  border-radius: 50%;  background: conic-gradient(    #ff6b6b 0% 30%,    #4ecdc4 30% 60%,    #667eea 60% 100%  );}/* カラーホイール */.color-wheel {  border-radius: 50%;  background: conic-gradient(    red, yellow, lime, aqua, blue, magenta, red  );}/* チェッカーボード風 */.checker {  background: conic-gradient(    #000 0deg 90deg, #fff 90deg 180deg, #000 180deg 270deg, #fff 270deg 360deg  );  background-size: 20px 20px;}

グラデーションの重ね合わせ

複数のグラデーションをbackgroundプロパティにカンマ区切りで重ねることができます。

/* 2つのlinear-gradientを重ねる */.layered {  background:     linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)),    linear-gradient(to right, #ff6b6b, #4ecdc4);}/* radialとlinearを重ねる */.overlay {  background:    radial-gradient(circle at center, rgba(255,255,255,0.1), transparent),    linear-gradient(135deg, #667eea, #764ba2);}

アクセシビリティ：コントラスト比の確認

グラデーション上にテキストを配置する際は、WCAG 2.1のコントラスト比要件を満たす必要があります。

WCAG 2.1 コントラスト比の要件：

• AA基準：通常テキスト 4.5:1以上 / 大テキスト（18pt以上or太字14pt以上）3:1以上
• AAA基準：通常テキスト 7:1以上 / 大テキスト 4.5:1以上

グラデーションは箇所によってコントラスト比が変わるため、テキストが重なる部分で最も低いコントラスト比を確認することが重要です。

カラーコード変換カラーコード変換

グラデーション設計のベストプラクティス

1. 隣接する色に近いものを選ぶ

カラーホイール上で近い色（例：赤→オレンジ→黄）のグラデーションは自然で美しく見えます。補色（赤↔緑、青↔オレンジ）のグラデーションは中間で濁った色になりやすいので注意が必要です。

2. ブランドカラーとの一貫性

グラデーションに使う色はブランドカラーのバリエーションに限定することで、デザインの一貫性が保たれます。

3. テキストが読めることを優先

どんなに美しいグラデーションでも、テキストが読めなければ意味がありません。必ずコントラスト比を確認してください。

4. アニメーションへの応用

CSS background-positionのアニメーションを使えば、グラデーションが流れるように動くエフェクトが作れます。

@keyframes gradientFlow {  0% { background-position: 0% 50%; }  50% { background-position: 100% 50%; }  100% { background-position: 0% 50%; }}.animated-gradient {  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);  background-size: 400% 400%;  animation: gradientFlow 15s ease infinite;}

まとめ

グラデーション	特徴	主な用途
linear-gradient	直線的な色変化	背景・ボタン・ヘッダー
radial-gradient	中心から放射状	スポットライト・ホバーエフェクト
conic-gradient	扇形・回転状	円グラフ・カラーホイール

グラデーションを使いこなすことで、画像なしでリッチなデザインを実現できます。

CSSグラデーションジェネレーターCSSグラデーション視覚的作成・カスタマイズ