<gradient>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

CSS グラデーションは内在的な寸法を持ちません。つまり、自然または推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。

構文

<gradient> データ型は、以下のリストにある関数型のうちの一つによって定義します。

線形グラデーション

線形グラデーション (linear gradient) は、色が仮想の直線に沿って変化します。 linear-gradient() 関数で生成されます。

放射グラデーション

放射グラデーション (radial gradient) は、色が中心点 (origin) から連続的に変化します。 radial-gradient() 関数で生成されます。

扇形グラデーション

扇形グラデーション (conic gradient) は、色が円を描くように連続的に変化します。 conic-gradient() 関数で生成されます。

反復グラデーション

反復グラデーション (repeating gradient) は、要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 repeating-linear-gradient()repeating-radial-gradient()repeating-conic-gradient() 関数で生成されます。

補間

色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。(古いブラウザーは、 transparent キーワードを使用するとこれを使用しないことがあるので注意してください。)

形式文法

<gradient> = 
<linear-gradient()> |
<repeating-linear-gradient()> |
<radial-gradient()> |
<repeating-radial-gradient()>

<linear-gradient()> =
linear-gradient( [ <linear-gradient-syntax> ] )

<repeating-linear-gradient()> =
repeating-linear-gradient( [ <linear-gradient-syntax> ] )

<radial-gradient()> =
radial-gradient( [ <radial-gradient-syntax> ] )

<repeating-radial-gradient()> =
repeating-radial-gradient( [ <radial-gradient-syntax> ] )

<linear-gradient-syntax> =
[ <angle> | to <side-or-corner> ]? , <color-stop-list>

<radial-gradient-syntax> =
[ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

<side-or-corner> =
[ left | right ] ||
[ top | bottom ]

<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?

<radial-shape> =
circle |
ellipse

<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}

<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<linear-color-stop> =
<color> <length-percentage>?

<linear-color-hint> =
<length-percentage>

<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side

<length-percentage> =
<length> |
<percentage>

線形グラデーションの例

単純な線形グラデーションです。

css
.linear-gradient {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

放射グラデーションの例

単純な放射グラデーションです。

css
.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30 144 255));
}

扇形グラデーションの例

単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。

css
.conic-gradient {
  background: conic-gradient(pink, coral, lime);
}

反復グラデーションの例

単純な線形および放射の反復グラデーションの例です。

css
.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    pink,
    pink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    lime,
    lime 15px,
    white 15px,
    white 30px
  );
}

.conic-repeat {
  background: repeating-conic-gradient(lime, pink 30deg);
}

仕様書

Specification
CSS Images Module Level 4
# gradients

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<gradient>
conic-gradient()
Double-position color stops
Hue interpolation method
Interpolation color space
linear-gradient()
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)
to keyword
Unitless 0 for <angle>
radial-gradient()
at syntax
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)
repeating-conic-gradient()
Hue interpolation method
Interpolation color space
repeating-linear-gradient()
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
to keyword
Unitless 0 for <angle>
repeating-radial-gradient()
at syntax
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報