linear-gradientの基本
linear-gradient()は直線的な方向に沿って2色以上を滑らかに変化させる、最も基本的なCSSグラデーションだ。背景・ボタン・区切り線と活用範囲が広く、CSSグラデーションを使うと言ったらまずこれを指すことが多い。基本構文は次のとおり。
/* 基本構文 */
background: linear-gradient(方向またはangle, カラーストップ1, カラーストップ2, ...);
/* 例1: 上から下（デフォルト） */
background: linear-gradient(#6366f1, #8b5cf6);
/* 例2: 左から右 */
background: linear-gradient(to right, #6366f1, #8b5cf6);
/* 例3: 角度指定（45度） */
background: linear-gradient(45deg, #6366f1, #8b5cf6);
方向キーワードと角度の指定
linear-gradient の第1引数には「方向」または「角度」を指定する。方向キーワードはコードの意図が読みやすく、角度指定は斜めグラデーションなど細かいコントロールが必要な場面で使う。
| 指定方法 |
値の例 |
グラデーションの向き |
| デフォルト（省略時） |
— |
上から下（to bottom と同等） |
| 方向キーワード |
to right / to bottom-right |
左→右 / 左上→右下 |
| 角度（deg） |
0deg / 90deg / 135deg |
下→上 / 左→右 / 左上→右下 |
| ターン（turn） |
0.25turn / 0.5turn |
左→右 / 上→下 |
Point
角度0degは「下から上」、90degが「左から右」。時計回りに増加する仕様なので、直感と少しずれる。迷ったときは to right や to bottom-right のような方向キーワードを使う方がコードの意図が伝わりやすい。
カラーストップ：色の位置を細かく制御する
カラーストップは「どの位置にどの色を置くか」を指定する。パーセンテージや px で位置を指定でき、省略した場合は均等に配置される。この位置指定を意識するだけで、グラデーションの印象をかなり精密にコントロールできる。
/* 位置を明示したカラーストップ */
background: linear-gradient(to right,
#6366f1 0%, /* 左端: インディゴ */
#8b5cf6 40%, /* 40%地点: パープル */
#ec4899 100% /* 右端: ピンク */
);
/* ハードストップ（境界なし） */
background: linear-gradient(to right,
#6366f1 50%,
#ec4899 50% /* 同じ位置に2色 → くっきり境界 */
);
/* 透明から色へ */
background: linear-gradient(to bottom,
transparent 0%,
rgba(0, 0, 0, 0.6) 100%
);
複数色のグラデーションとカラーヒント
3色以上のグラデーションも自由に作れる。カラーヒント（中間点指定）を使うと色の遷移速度をコントロールでき、「ゆっくり変化してから急に変わる」といった非線形な色変化が表現できる。
/* 虹グラデーション */
background: linear-gradient(to right,
#ef4444, #f97316, #eab308,
#22c55e, #3b82f6, #8b5cf6
);
/* カラーヒント: 色の遷移の中間点を30%に引き寄せる */
background: linear-gradient(to right,
#6366f1,
30%, /* 中間点をここに */
#ec4899
);
radial-gradient（円形・楕円グラデーション）
radial-gradient()は中心点から外側に向かって放射状に広がるグラデーション。スポットライト効果や円形のハイライトを表現するのに最適で、ヒーロー背景に複数の radial-gradient を重ねると、イラストのような奥行きのある背景が作れる。
/* 基本構文 */
background: radial-gradient(形状 サイズ at 位置, カラーストップ1, カラーストップ2);
/* 例1: 中央から広がる円形（デフォルト） */
background: radial-gradient(circle, #6366f1, #1e1b4b);
/* 例2: 楕円（要素の形状に合わせる）*/
background: radial-gradient(ellipse, #6366f1, #1e1b4b);
/* 例3: 左上を中心にしたスポットライト */
background: radial-gradient(circle at top left, #8b5cf6, transparent 60%);
形状・サイズ・中心位置の指定
radial-gradient は「形状」「サイズ」「中心位置」の3つのパラメータを組み合わせて細かくコントロールできる。
-
形状（shape）
circle（正円）または ellipse（楕円）を指定する。省略した場合、要素が正方形であれば circle、それ以外は ellipse が自動で適用される。視覚的にきれいな正円を出したい場合は明示的に circle を指定しておくと安全だ。
-
サイズ（size）
closest-side / farthest-side / closest-corner / farthest-corner（デフォルト）などのキーワード、またはpx・%で直接サイズを指定できる。circle 80px のように半径を固定すると、要素サイズに依存しない均一なグラデーションが作れる。
-
中心位置（at position）
at center / at top left / at 30% 60% のように中心座標を指定する。デフォルトは at center。スポットライト効果や画像オーバーレイでは、この中心位置のコントロールが表現の肝になる。
/* スポットライト効果 */
background:
radial-gradient(circle at 30% 40%, rgba(99, 102, 241, 0.4) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(236, 72, 153, 0.3) 0%, transparent 50%),
#0f172a;
/* ボタンのハイライト */
background: radial-gradient(
circle at 50% 0%,
rgba(255, 255, 255, 0.15) 0%,
transparent 60%
);
/* closest-sideでサイズを制御 */
background: radial-gradient(circle closest-side at 50% 50%, #6366f1, transparent);
活用Tips
複数の radial-gradient を重ねると、イラストのような奥行き感のある背景が作れる。background プロパティはカンマ区切りで複数の画像・グラデーションを重ねられるため、linear と radial を組み合わせた複雑な背景表現も1行のCSSで実現できる。
conic-gradient（円錐グラデーション）
conic-gradient()は中心点を軸として扇状に色が変化するグラデーション。色相環のような見た目になることが多い。円グラフ（パイチャート）の描画や、SaaSプロダクトでよく見かける「光が回転するボーダー」のアニメーションに特に有効で、これらをSVGやJavaScriptなしで純粋なCSSだけで実装できる。
/* 基本構文 */
background: conic-gradient(from 開始角度 at 中心位置, カラーストップ1, カラーストップ2);
/* 例1: 基本的な円錐グラデーション */
background: conic-gradient(#ef4444, #eab308, #22c55e, #3b82f6, #8b5cf6, #ef4444);
/* 例2: 0度から開始（上から時計回り） */
background: conic-gradient(from 0deg, #6366f1 0%, #ec4899 100%);
/* 例3: 中心点をずらす */
background: conic-gradient(from 0deg at 30% 50%, #6366f1, #ec4899);
円グラフ（パイチャート）をCSSだけで作る
conic-gradient のハードストップを使うと、SVGや Canvas を一切使わずに円グラフを表現できる。ライブラリへの依存ゼロで、CSSだけで完結するのが最大の強みだ。
/* 売上構成比 チャート例（合計100%） */
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
#6366f1 0% 35%, /* Webデザイン: 35% */
#8b5cf6 35% 58%, /* コーディング: 23% */
#ec4899 58% 76%, /* ディレクション: 18% */
#f97316 76% 92%, /* コンサル: 16% */
#94a3b8 92% 100% /* その他: 8% */
);
}
/* ドーナツチャート（中抜き） */
.donut-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(#6366f1 60%, #e2e8f0 60%);
mask: radial-gradient(circle, transparent 60px, black 60px);
-webkit-mask: radial-gradient(circle, transparent 60px, black 60px);
}
回転するグラデーションボーダー
conic-gradientとCSS animationを組み合わせると、SaaSプロダクトのカードでよく見かける「光が回転するボーダー」を純粋なCSSだけで実装できる。
/* グロー回転ボーダー */
@property --angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.card-glow {
position: relative;
}
.card-glow::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: conic-gradient(
from var(--angle),
transparent 70%,
#6366f1,
#ec4899,
transparent
);
animation: rotate 3s linear infinite;
}
@keyframes rotate {
to { --angle: 360deg; }
}
Point
conic-gradient の from 句に @property で定義したカスタムプロパティを使うと、JavaScript なしでアニメーションできる。@property は Chromium・Safari 対応済みで、Firefox は128以降で正式サポート。グローバル対応率は現時点で95%超なので、プロダクション導入前にターゲットブラウザを確認しておけば問題ないレベルだ。
repeating-gradient（繰り返しパターン）
repeating-linear-gradient()・repeating-radial-gradient()・repeating-conic-gradient()は、指定したカラーストップのパターンを要素全体に繰り返す関数だ。ストライプ・チェック・ドット・斜めストライプなどの幾何学パターンを画像ファイルなしで実現できる。
/* ストライプ背景 */
background: repeating-linear-gradient(
45deg,
#6366f1 0px,
#6366f1 10px,
transparent 10px,
transparent 20px
);
/* ゼブラ縞（横ストライプ） */
background: repeating-linear-gradient(
to bottom,
#f8fafc 0px,
#f8fafc 40px,
#f1f5f9 40px,
#f1f5f9 80px
);
/* 同心円パターン */
background: repeating-radial-gradient(
circle at center,
#6366f1 0px,
#6366f1 2px,
transparent 2px,
transparent 20px
);
/* 回転ストライプ（危険テープ風） */
background: repeating-linear-gradient(
-45deg,
#fbbf24 0px,
#fbbf24 20px,
#1e293b 20px,
#1e293b 40px
);
チェック柄・格子パターンの作り方
単一のグラデーションではチェック柄を作れませんが、2つのグラデーションを重ねることで実現できる。
/* チェック柄（2つのグラデーションを合成） */
background:
repeating-linear-gradient(
90deg,
rgba(99, 102, 241, 0.1) 0px,
rgba(99, 102, 241, 0.1) 1px,
transparent 1px,
transparent 40px
),
repeating-linear-gradient(
0deg,
rgba(99, 102, 241, 0.1) 0px,
rgba(99, 102, 241, 0.1) 1px,
transparent 1px,
transparent 40px
);
注意
repeating-gradient はカラーストップの末尾の位置で繰り返し幅が決まる。ストライプの太さを変えるには最後のストップ位置（例: 20px）を調整する。ストップ位置に % を使うと繰り返しが発生しないため、ピクセル単位での指定が基本だ。
実用デザインパターン
グラデーションはbackgroundプロパティ以外にも、テキストカラー・ボーダー・オーバーレイ・マスクなど幅広い場面で使える。以下に実務でよく使う実装パターンを挙げていく。
グラデーションテキスト（テキストに色を乗せる）
/* グラデーションテキスト */
.gradient-text {
background: linear-gradient(135deg, #6366f1, #ec4899);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; /* フォールバック */
}
Point
background-clip: text と -webkit-text-fill-color: transparent の組み合わせは Chrome・Safari・Firefox・Edge すべてで動作する。ただし、グラデーションの薄い部分でコントラスト比が落ちることがある。見た目で「読める」と思っても、WCAG基準では引っかかるケースがあるため、コントラストチェッカーで最低輝度部分を確認しておきたい。
グラデーションボーダー
/* 方法1: border-imageを使う */
.gradient-border {
border: 2px solid transparent;
border-image: linear-gradient(135deg, #6366f1, #ec4899) 1;
/* 注意: border-radiusとの併用不可 */
}
/* 方法2: pseudoエレメントで実現（border-radius対応） */
.gradient-border-rounded {
position: relative;
background: #1e293b;
border-radius: 12px;
}
.gradient-border-rounded::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 14px;
background: linear-gradient(135deg, #6366f1, #ec4899);
z-index: -1;
}
画像オーバーレイ（フェードアウト効果）
/* 下部フェードアウトオーバーレイ */
.image-overlay {
position: relative;
}
.image-overlay::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(to bottom, transparent, rgba(15, 23, 42, 0.9));
pointer-events: none;
}
/* ヒーロー画像への暗幕 */
.hero-bg {
background:
linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(139, 92, 246, 0.6)),
url('/images/hero.jpg') center/cover no-repeat;
}
ボタンのホバーエフェクト
/* グラデーションボタン */
.btn-gradient {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
background-size: 200% 200%;
background-position: left center;
transition: background-position 0.4s ease;
color: #fff;
border: none;
padding: 12px 28px;
border-radius: 8px;
cursor: pointer;
}
.btn-gradient:hover {
background-position: right center;
}
スクロールプログレスバー
/* スクロール進捗バー（linear-gradient + JavaScriptで制御） */
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(to right, #6366f1, #ec4899);
width: var(--scroll-progress, 0%); /* JSで更新 */
z-index: 9999;
}
グラスモーフィズム（Glassmorphism）背景
2021年以降に定着したグラスモーフィズムのデザインでは、グラデーションとbackdrop-filterを組み合わせてガラス越しのような透明感を出す。単独では実現できないが、グラデーションが重要な役割を担っている。
/* グラスカード */
.glass-card {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.15),
rgba(255, 255, 255, 0.05)
);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
}
/* ダーク背景の上に重ねると映える */
.hero-section {
background:
radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.2) 0%, transparent 50%),
#0f172a;
}
グラスモーフィズムのコツ
グラスモーフィズムは背景が複雑なほど映える。単色背景の上では効果が薄いため、必ず radial-gradient などで奥行きのある背景を用意してからガラスカードを重ねること。backdrop-filter のパフォーマンス負荷も高いため、使用箇所は限定するのが賢明だ。
「CSSグラデーションと画像、どちらがパフォーマンスに優れているか」——答えは実装シーンによって異なる。適切な使い分けを把握しておけば、ページの表示速度とCore Web Vitalsスコアの最適化に直結する。
| 比較項目 |
CSSグラデーション |
背景画像（PNG/JPG/WebP） |
| ファイルサイズ |
0KB（CSSに記述） |
数KB〜数百KB |
| HTTPリクエスト |
不要 |
1リクエスト追加 |
| レンダリング負荷 |
CPU/GPUで再描画（大面積・アニメーションは重い） |
デコード処理が必要 |
| レスポンシブ対応 |
自動でスケール |
srcset/pictureで最適化が必要 |
| キャッシュ |
CSSファイルと同じ |
個別にキャッシュ制御可能 |
| アクセシビリティ |
装飾のみ（altテキスト不要） |
意味のある画像はalt必須 |
パフォーマンスを最大化する実装指針
- 単色〜2色のシンプルなグラデーション背景はCSSグラデーションを使う（ファイルサイズゼロ）
- 写真やイラストを含む複雑な背景は WebP 形式の画像を使用する
- アニメーションするグラデーションは
transform と opacity のみを変化させ、GPU合成レイヤーを活用する
- 全画面グラデーション背景のアニメーションは
background-position の変化で行い、毎フレーム再描画を避ける
- ヒーローセクションなどATF（Above the Fold）の背景はCSSグラデーションにすることでLCP（最大コンテンツ描画）を改善できる
- モバイルデバイスでは大面積のconic-gradientは描画コストが高くなるため、検証ツールでCPU負荷を確認する
LCP改善のヒント
ヒーローセクションの背景を画像からCSSグラデーションに変更するだけで、HTTPリクエストがゼロになり LCP スコアが大幅に改善するケースがある。実際、フォトリアルな表現が不要なヒーロー背景をグラデーションに置き換えただけで LCP が1秒以上改善した事例も珍しくない。フォトリアルな表現が不要な場面では積極的に置き換えを検討したい。
グラデーションジェネレーターの使い方
CSSグラデーションのコードは手書きもできるが、色の組み合わせや角度・カラーストップの位置はリアルタイムプレビューで調整するほうが圧倒的に速い。当サイトのCSSグラデーションジェネレーターは登録不要・無料で使える。
-
グラデーションタイプを選択
linear / radial / conic の3種類から用途に応じたタイプを選ぶ。選択するとプレビューエリアにリアルタイムで反映される。
-
カラーストップを設定
カラーピッカーで色を指定し、スライダーでストップ位置を調整。「+」ボタンで途中色を追加でき、ドラッグで順番の入れ替えも可能。
-
方向・角度・サイズを調整
linear の場合は角度ダイヤル、radial の場合は形状・サイズ・中心位置のオプションが表示される。プレビューを見ながら直感的に調整できる。
-
CSSコードをコピー
「コードをコピー」ボタンでクリップボードにCSSを取得。background プロパティとして貼り付けるだけで実装完了。
ツールで効率化
グラデーションコードの手動編集は試行錯誤の連続で時間を食う。当サイトのグラデーションジェネレーターならリアルタイムプレビューで確認しながら設定でき、コピーワンクリックで即使える。