Widely available 安心して使用可能。すべての主要ブラウザで長年サポートされている。

CSS Gradients (linear, radial)

<gradient> は CSS のデータ型で、2 色以上の連続的な色の変化で構成される特殊な型の <image> です。

エフェクト背景

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.background-image.gradients
1
12
3.6
4
18
3.2
css.types.gradient

は CSS のデータ型で、2 色以上の連続的な色の変化で構成される特殊な型の image です。
26
12
3.6
7
26
7
CSS タイプ
linear-gradient

linear-gradient() は CSS の関数で、2 つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。結果は gradient データ型のオブジェクトであり、これは image の特殊型です。
26
12
16
7
26
7
linear-gradient.doubleposition

ダブルポジションカラーストップ
71
79
64
12.1
71
12.2
linear-gradient.interpolation hints

補間ヒント/勾配中間点
40
79
36
7
40
7
linear-gradient.premultiplied gradients

事前に乗算された色空間に適用されるグラデーション (透明度のあるグラデーションにグレーが表示されるのを防ぎます)
29
79
36
15
29
15
linear-gradient.single color stop

単色ストップと 0 ～ 1 の位置
135
135
136
18.4
135
18.4
linear-gradient.to

「to」キーワード
26
12
10
7
26
7
linear-gradient.unitless 0 angle

<角度> には単位のない `0`
26
12
55
7
26
7
radial-gradient

radial-gradient() は CSS の関数で、 2 つ以上の色の連続的な推移が原点から放射状に広がる画像を生成します。形状は円形または楕円形になります。関数の結果は gradient データ型のオブジェクトであり、これは image の特殊形です。
26
12
16
7
26
7
radial-gradient.at

「at」構文
26
12
10
7
26
7
radial-gradient.doubleposition

ダブルポジションカラーストップ
71
79
64
12.1
71
12.2
radial-gradient.interpolation hints

補間ヒント/勾配中間点
40
79
36
7
40
7
radial-gradient.premultiplied gradients

事前に乗算された色空間に適用されるグラデーション (透明度のあるグラデーションにグレーが表示されるのを防ぎます)
29
79
36
15
29
15
radial-gradient.single color stop

単色ストップと 0 ～ 1 の位置
135
135
136
18.4
135
18.4
repeating-linear-gradient

repeating-linear-gradient() は CSS の関数で、反復線形グラデーションによる画像を生成します。 gradient/linear-gradient と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は gradient データ型のオブジェクトであり、これは image の特殊型です。
26
12
16
7
26
7
repeating-linear-gradient.doubleposition

ダブルポジションカラーストップ
71
79
64
12.1
71
12.2
repeating-linear-gradient.interpolation hints

補間ヒント/勾配中間点
40
79
36
7
40
7
repeating-linear-gradient.single color stop

単色ストップと 0 ～ 1 の位置
135
135
136
18.4
135
18.4
repeating-linear-gradient.to

「to」キーワード
26
12
10
7
26
7
repeating-linear-gradient.unitless 0 angle

<角度> には単位のない `0`
26
12
55
7
26
7
repeating-radial-gradient

repeating-radial-gradient() は CSS の関数で、原点から広がり反復するグラデーションから成る画像を生成します。 gradient/radial-gradient と似ており、同じ引数を取りますが、 gradient/repeating-linear-gradient と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は gradient データ型のオブジェクトであり、これは image の特殊型です。
26
12
16
7
26
7
repeating-radial-gradient.at

「at」構文
26
12
16
7
26
7
repeating-radial-gradient.doubleposition

ダブルポジションカラーストップ
71
79
64
12.1
71
12.2
repeating-radial-gradient.interpolation hints

補間ヒント/勾配中間点
40
79
36
7
40
7
repeating-radial-gradient.single color stop

単色ストップと 0 ～ 1 の位置
135
135
136
18.4
135
18.4
その他
css.types.image

は CSS の データ型で、2 次元の画像を表現します。
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • 一部のバージョンは、「-webkit」という接頭辞が付いた実験的なグラデーションのみをサポートしています。
注釈 1件
実装メモ
  • 一部のバージョンは、「-moz」という接頭辞が付いた実験的なグラデーションのみをサポートしています。
注釈 1件
実装メモ
  • 一部のバージョンは、「-webkit」という接頭辞が付いた実験的なグラデーションのみをサポートしています。
注釈 1件
実装メモ
  • 一部のバージョンは、「-webkit」という接頭辞が付いた実験的なグラデーションのみをサポートしています。
注釈 1件
実装メモ
  • 一部のバージョンは、「-webkit」という接頭辞が付いた実験的なグラデーションのみをサポートしています。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (10)
注釈 1件
実装メモ
  • グラデーションは `background-image`、`border-image`、および `mask-image` に限定されます。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5.1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (10)
注釈 4件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • ベンダープレフィックス付きで対応: -moz- (3.6)
  • Firefox 42 以降、「layout.css.prefixes.gradients」を「false」に設定することで、接頭辞付きバージョンのグラデーションを無効にできます。
実装メモ
  • `<angle>` を上からではなく右から開始するとみなします。 つまり、 角度「0deg」を右を指​​す方向指示器と見なしました。
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5.1)
実装メモ
  • Safari 4 は実験的な `-webkit-gradient(linear,…)` 関数をサポートしていました。 新しい標準バージョンよりも制限があり、「linear-gradient()」のように位置と角度の両方を指定することはできません。 この古い時代遅れの構文は、互換性の目的で引き続きサポートされています。
  • `<angle>` を上からではなく右から開始するとみなします。 つまり、 角度「0deg」を右を指​​す方向指示器と見なしました。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5)
実装メモ
  • iOS 3.2 の Safari は実験的な `-webkit-gradient(linear,…)` 関数をサポートしていました。 新しい標準バージョンよりも制限があり、「linear-gradient()」のように位置と角度の両方を指定することはできません。 この古い時代遅れの構文は、互換性の目的で引き続きサポートされています。
  • `<angle>` を上からではなく右から開始するとみなします。 つまり、 角度「0deg」を右を指​​す方向指示器と見なしました。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (55)
実装メモ
  • `-webkit-linear-gradient()` および `-moz-linear-gradient()` でのみ受け入れられ、`linear-gradient()` では受け入れられません。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (13)
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • ベンダープレフィックス付きで対応: -moz- (3.6)
  • Firefox 42 以降、「layout.css.prefixes.gradients」を「false」に設定することで、接頭辞付きバージョンのグラデーションを無効にできます。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5.1)
実装メモ
  • Safari 4 は実験的な `-webkit-gradient(radial,…)` 関数をサポートしていました。 この古い時代遅れの構文は、互換性の目的で引き続きサポートされています。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5)
実装メモ
  • iOS 3.2 の Safari は実験的な `-webkit-gradient(radial,…)` 関数をサポートしていました。 この古い時代遅れの構文は、互換性の目的で引き続きサポートされています。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (10)
注釈 5件
実装メモ
  • Firefox 36 より前では、事前に乗算された色空間にグラデーションが適用されなかったため、透明度を使用するとグレーの陰影が予期せず表示されてしまいました。
  • `<angle>` を上からではなく右から開始するとみなします。 つまり、 角度「0deg」を右を指​​す方向指示器と見なしました。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • ベンダープレフィックス付きで対応: -moz- (3.6)
  • Firefox 42 以降、「layout.css.prefixes.gradients」を「false」に設定することで、接頭辞付きバージョンのグラデーションを無効にできます。
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5.1)
実装メモ
  • Safari 4 は実験的な `-webkit-gradient(linear,…)` 関数をサポートしていました。 これは、後の標準バージョンよりも制限があり、「repeat-linear-gradient()」のように位置と角度の両方を指定することはできません。 この古い時代遅れの構文は、互換性の目的で引き続きサポートされています。
  • `<angle>` を上からではなく右から開始するとみなします。 つまり、 角度「0deg」を右を指​​す方向指示器と見なしました。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5)
実装メモ
  • iOS 3.2 の Safari は実験的な `-webkit-gradient(linear,…)` 関数をサポートしていました。 これは、後の標準バージョンよりも制限があり、「repeat-linear-gradient()」のように位置と角度の両方を指定することはできません。 この古い時代遅れの構文は、互換性の目的で引き続きサポートされています。
  • `<angle>` を上からではなく右から開始するとみなします。 つまり、 角度「0deg」を右を指​​す方向指示器と見なしました。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (55)
実装メモ
  • `-webkit-repeat-linear-gradient()` および `-moz-repeat-linear-gradient()` でのみ受け入れられ、`repeating-linear-gradient()` では受け入れられません。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (10)
注釈 4件
実装メモ
  • Firefox 36 より前では、事前に乗算された色空間にグラデーションが適用されなかったため、透明度を使用するとグレーの陰影が予期せず表示されてしまいました。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • ベンダープレフィックス付きで対応: -moz- (3.6)
  • Firefox 42 以降、「layout.css.prefixes.gradients」を「false」に設定することで、接頭辞付きバージョンのグラデーションを無効にできます。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5.1)
実装メモ
  • Safari 4 は実験的な `-webkit-gradient(radial,…)` 関数をサポートしていました。 この古い時代遅れの構文は、互換性の目的で引き続きサポートされています。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5)
実装メモ
  • iOS 3.2 の Safari は実験的な `-webkit-gradient(radial,…)` 関数をサポートしていました。 この古い時代遅れの構文は、互換性の目的で引き続きサポートされています。
注釈 4件
実装メモ
  • Firefox 36 より前では、事前に乗算された色空間にグラデーションが適用されなかったため、透明度を使用するとグレーの陰影が予期せず表示されてしまいました。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (49)
  • ベンダープレフィックス付きで対応: -moz- (10)
  • Firefox 42 以降、「layout.css.prefixes.gradients」を「false」に設定することで、接頭辞付きバージョンのグラデーションを無効にできます。

基本構文

CSS 
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.spotlight {
  background: radial-gradient(circle at 30% 40%, #fff 0%, transparent 70%);
}

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

ライブデモ

linear-gradient

CSS Gradients (linear, radial) Linear-gradient demo.

プレビュー全画面表示

radial-gradient

CSS Gradients (linear, radial) Radial-gradient demo.

プレビュー全画面表示

repeating-linear-gradient

CSS Gradients (linear, radial) Repeating-linear-gradient demo.

プレビュー全画面表示

実務での使いどころ

  • ヒーローセクションの背景

    画像を使わずにグラデーションで美しいヒーローバナーを作成する。

  • 装飾パターン

    repeating-linear-gradient でストライプやチェックなどの幾何学パターンを生成。

注意点

  • 複雑なグラデーションの重ね合わせはレンダリングパフォーマンスに影響する可能性がある。

アクセシビリティ

  • グラデーション上にテキストを配置する場合は、すべての位置で十分なコントラスト比を確保する。

参考リンク