CSS グラデーション実践ガイド
2026 年 7 月 28 日確認
Boltpic
現在の Boltpic ツールの動作を説明し、関連する技術資料へリンクしています。画像・ブラウザ・端末によって変わる結果は、固定値ではなく条件とともに示します。
CSS グラデーションは別の背景画像をダウンロードせず、ブラウザが描画時に生成します。解像度に合わせて鮮明に表示され、コードで色や方向を調整できるため、ヒーロー、ボタン、チャート、写真上のオーバーレイに向いています。
文法自体は半日で覚えられます。もう少し時間がかかるのはレシピと落とし穴を知ることで、このガイドが扱うのはまさにその部分です。
linear-gradient: 主力
background: linear-gradient(135deg, #0066cc, #7a3ce8);第1引数は方向です。角度(0deg は上、90deg は右)か、“to right” のようなキーワードで書きます。続いて色の停止点(ストップ)で、数に制限はありません。既定では均等に配置されますが、ストップにパーセントを付ければ配合を制御できます。linear-gradient(90deg, #0066cc 30%, #7a3ce8) は、最初の 30% まで青を保ってから混ざりはじめます。
ハードストップ: ストライプと分割背景
2 つのストップを同じ位置に置くと混合区間がなくなり、明確な境界を作れます。この方法は帯状の背景や繰り返しパターンを作るときに使えます。
/* ツートーン分割 */
background: linear-gradient(90deg, #1d1d1f 50%, #f5f5f7 50%);
/* 斜めストライプ */
background: repeating-linear-gradient(45deg,
#0066cc 0 12px, #eef4ff 12px 24px);放射状と円錐状のグラデーション
radial-gradient は中心点から外へ広がり、光やスポットライトの効果を作れます。例の radial-gradient(circle at 30% 20%, #ffffff33, transparent 60%) は、明るい点から透明へ変化するハイライトです。conic-gradient は中心を軸に回転し、進捗リング、円グラフ、カラーホイールなどに利用できます。
/* JavaScript なしの 70% 進捗リング */
background: conic-gradient(#0066cc 0 70%, #e0e0e0 70% 100%);
border-radius: 50%;インターフェースでの 3 つの例
写真のオーバーレイ。写真に白い文字を載せる場合、明るい部分では文字が読みにくくなります。文字の背後に、上部が透明で下部が暗いグラデーションを重ねると、背景とのコントラストを調整できます。
background:
linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65)),
url(hero.webp) center / cover;グラデーションテキスト。グラデーションを文字の形で切り抜く方法です。
.headline {
background: linear-gradient(90deg, #0066cc, #00b3a4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}ボタンのさりげないハイライト。上から下へ小さな明度差を付けると奥行きを加えられます。ただし、ホバー・フォーカス・押下状態の代わりにはなりません。ラベルと周囲の背景とのコントラストも確認してください。
バンディング: グラデーションの持病
広い面積や暗い色のグラデーションでは、なめらかな混合の代わりに縞が見えることがあります。バンディングは色の精度、ディスプレイ特性、圧縮、ブラウザの描画方法に左右され、端末ごとに見え方が変わります。
まずストップ間の距離や色差を小さくし、必要に応じて中間ストップを追加します。それでも縞が目立つ場合は、ごく弱いノイズを重ねるディザリングも候補です。効果は表示環境、色空間、画像化時のビット深度によって変わるため、実際の出力で確認してください。
きれいに混ざる色の選び方
近い色相は予測しやすい混合になりますが、離れた色相は途中に意図しない中間色が生じることがあります。中間ストップを追加して経路を調整してください。写真から候補色を抽出する方法もあります。カラーピッカーやパレット抽出で値を取り出し、グラデーションツールで配合した後、実際の画面で確認します。
グラデーション値の補間は、環境によって対応が一貫しない場合があります。動きを付けるなら、大きなグラデーションの background-position を動かすか、2 枚のレイヤーを不透明度で切り替える方法が比較的予測しやすくなります。対象ブラウザで性能とモーション低減設定も確認してください。