円形グラデーション (radial-gradient)
radial-gradient() は、中心点から外側に向かって色を混ぜます。CSS のグラデーションはすべて画像なので、background-image (または background のショートハンド) に書きます:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Radial gradient</title>
<style>
body { font-family: system-ui, sans-serif; font-size: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
.ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
.circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
.corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
</style>
</head>
<body>
<div class="row">
<div><div class="box ellipse"></div>ellipse (default)</div>
<div><div class="box circle"></div>circle</div>
<div><div class="box corner"></div>circle at top left</div>
</div>
</body>
</html>
完全な構文は radial-gradient(shape size at position, color stops) です。色より前の部分はすべて省略できます。
| 部分 | 値 | 初期値 |
|---|
| 形 | circle、ellipse | ellipse |
| サイズ | closest-side、closest-corner、farthest-side、farthest-corner、または長さ | farthest-corner |
| 位置 | at center、at top left、at 30% 70%、at 20px 40px | at center |
| カラーストップ | 2 つ以上の色。それぞれ位置を付けられる | |
サイズのキーワードは、最後の色がどこで届くかを決めます。ボックスの一番近い辺、一番遠い角、といった具合です。ここで値を変えると、グラデーションが描き直されます:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Radial gradient tester</title>
<style>
body { font-family: system-ui, sans-serif; }
#box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
#out { font-size: 13px; }
</style>
</head>
<body>
<label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
<div id="box"></div>
<code id="out"></code>
<script>
const box = document.getElementById('box');
const input = document.getElementById('val');
const show = () => {
const value = 'radial-gradient(' + input.value + ')';
const ok = CSS.supports('background-image', value);
if (ok) box.style.backgroundImage = value;
document.getElementById('out').textContent = ok ? value : 'invalid gradient';
};
input.addEventListener('input', show);
show();
</script>
</body>
</html>
circle farthest-corner at 30% 50%, #f59e0b, #2563eb、ellipse at bottom, white, #16a34a、circle 40px, #f59e0b 99%, transparent (縁がくっきりした点) を試してみてください。
線形グラデーション (linear-gradient)
linear-gradient() は直線に沿って色を混ぜます。最初に方向か角度を書き、その後に色を書きます:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Linear gradient</title>
<style>
body { font-family: system-ui, sans-serif; font-size: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
.down { background-image: linear-gradient(#2563eb, #16a34a); }
.right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
.angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
.three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
</style>
</head>
<body>
<div class="row">
<div><div class="box down"></div>default (to bottom)</div>
<div><div class="box right"></div>to right</div>
<div><div class="box angle"></div>45deg</div>
<div><div class="box three"></div>three colors</div>
</div>
</body>
</html>
角度は 0deg が上向きで、時計回りに進みます。つまり 90deg は to right、180deg は初期値の to bottom です。to right は右から左に書くページでも物理的な向きのままです。読む方向に合わせたいときは、自分で反転させてください。
カラーストップとくっきりした境目
色にはそれぞれ位置を付けられます。位置がなければ、色は均等に並びます。2 つの色が同じ位置を持つと、色が一瞬で切り替わります。ストライプ、旗、プログレスバーはこうして描きます:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Color stops</title>
<style>
body { font-family: system-ui, sans-serif; font-size: 14px; }
.bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
.shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
.hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
.stripes {
background: repeating-linear-gradient(45deg,
#f59e0b 0 12px, #111827 12px 24px);
}
.rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
</style>
</head>
<body>
Solid until 70%, then blends
<div class="bar shifted"></div>
Hard stop at 60% (a progress bar)
<div class="bar hard"></div>
repeating-linear-gradient
<div class="bar stripes"></div>
repeating-radial-gradient
<div class="bar rings"></div>
</body>
</html>
ストップには #111827 12px 24px のように 2 つの位置も指定でき、12px から 24px まで単色の帯を描きます。
扇形グラデーション (conic-gradient)
conic-gradient() は、時計の針のように中心点の周りに色を回します。くっきりした境目と組み合わせると、画像も JavaScript も使わずに円グラフが描けます:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Conic gradient</title>
<style>
body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
.pie {
width: 140px; height: 140px; border-radius: 50%;
background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
}
.wheel {
width: 140px; height: 140px; border-radius: 50%;
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
</style>
</head>
<body>
<div><div class="pie"></div>45%, 30%, 25%</div>
<div><div class="wheel"></div>A color wheel</div>
</body>
</html>
CSS で描いたグラフはスクリーンリーダーには見えないので、数値はテキストでも書いておきましょう。
グラデーション文字
グラデーションの背景を文字の形で切り抜き、文字自体を透明にします:
.gradient-text {
background: linear-gradient(90deg, #2563eb, #db2777);
-webkit-background-clip: text; /* older browsers need the prefix */
background-clip: text;
color: transparent;
}
通常の color の代わりを意識しておきましょう。切り抜きが効かないと、文字が消えてしまいます。グラデーション文字はコントラストもまちまちなので、大きな見出しだけに使います。
グラデーションは、画像やほかのグラデーションと 1 つの background-image のリストに重ねられます。レイヤー、サイズ、位置は 背景画像のページ で解説しています。
よくある間違い
background-color: linear-gradient(...)。 グラデーションは画像です。background-image か background を使います。- 角度の向きの勘違い。 0deg は右ではなく上向きです。
90deg が右向きです。
- 高さのない要素にグラデーションを付ける。 何も表示されません。内容かサイズを与えてください。
- 中間の色がにごる。 赤と緑のような鮮やかな反対色を混ぜると、sRGB では灰色がかった茶色を通ります。中間のストップを足すか、別の色空間で混ぜます:
linear-gradient(in oklch, red, green)。
- 大きく淡いグラデーションの色の段差 (バンディング)。 近い色を広い面積で混ぜると段差が見えます。ストップ同士の差を少し大きくすると改善します。
