Widely availableA strong styling tool when used with restraint and tested for readability.
Color Widely available

Gradients

Gradients generate smooth transitions between colors directly in CSS. They are useful for atmosphere, emphasis, and layered surface treatments without image assets.

ColorBackgroundsGradients

Overview

Gradients generate smooth transitions between colors directly in CSS. They are useful for atmosphere, emphasis, and layered surface treatments without image assets.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
gradient
26
12
3.6
7
26
7
CSS property
gradients

The CSS data type is a special type of image that consists of a progressive transition between two or more colors.
1
12
3.6
4
18
3.2
CSS type
linear-gradient

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the gradient data type, which is a special kind of image.
26
12
16
7
26
7
linear-gradient.doubleposition

Double-position color stops
71
79
64
12.1
71
12.2
linear-gradient.interpolation hints

Interpolation Hints / Gradient Midpoints
40
79
36
7
40
7
linear-gradient.premultiplied gradients

Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)
29
79
36
15
29
15
linear-gradient.single color stop

Single color stop and 0-1 positions
135
135
136
18.4
135
18.4
linear-gradient.to

`to` keyword
26
12
10
7
26
7
linear-gradient.unitless 0 angle

Unitless `0` for <angle>
26
12
55
7
26
7
radial-gradient

The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the gradient data type, which is a special kind of image.
26
12
16
7
26
7
radial-gradient.at

`at` syntax
26
12
10
7
26
7
radial-gradient.doubleposition

Double-position color stops
71
79
64
12.1
71
12.2
radial-gradient.interpolation hints

Interpolation Hints / Gradient Midpoints
40
79
36
7
40
7
radial-gradient.premultiplied gradients

Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)
29
79
36
15
29
15
radial-gradient.single color stop

Single color stop and 0-1 positions
135
135
136
18.4
135
18.4
repeating-linear-gradient

The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to gradient/linear-gradient and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. The function's result is an object of the gradient data type, which is a special kind…
26
12
16
7
26
7
repeating-linear-gradient.doubleposition

Double-position color stops
71
79
64
12.1
71
12.2
repeating-linear-gradient.interpolation hints

Interpolation Hints / Gradient Midpoints
40
79
36
7
40
7
repeating-linear-gradient.single color stop

Single color stop and 0-1 positions
135
135
136
18.4
135
18.4
repeating-linear-gradient.to

`to` keyword
26
12
10
7
26
7
repeating-linear-gradient.unitless 0 angle

Unitless `0` for <angle>
26
12
55
7
26
7
repeating-radial-gradient

The repeating-radial-gradient() CSS function creates an image consisting of repeating gradients that radiate from an origin. It is similar to gradient/radial-gradient and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to gradient/repeating-linear-gradient. The function's…
26
12
16
7
26
7
repeating-radial-gradient.at

`at` syntax
26
12
16
7
26
7
repeating-radial-gradient.doubleposition

Double-position color stops
71
79
64
12.1
71
12.2
repeating-radial-gradient.interpolation hints

Interpolation Hints / Gradient Midpoints
40
79
36
7
40
7
repeating-radial-gradient.single color stop

Single color stop and 0-1 positions
135
135
136
18.4
135
18.4
Other
css.types.image

The CSS data type represents a two-dimensional image.
1
12
1
1
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (10)
Notes 1 item(s)
Implementation note
  • Gradients are limited to `background-image`, `border-image`, and `mask-image`.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5)
Notes 1 item(s)
Compatibility
  • Some versions support only experimental gradients prefixed with `-webkit`.
Notes 1 item(s)
Compatibility
  • Some versions support only experimental gradients prefixed with `-moz`.
Notes 1 item(s)
Compatibility
  • Some versions support only experimental gradients prefixed with `-webkit`.
Notes 1 item(s)
Compatibility
  • Some versions support only experimental gradients prefixed with `-webkit`.
Notes 1 item(s)
Compatibility
  • Some versions support only experimental gradients prefixed with `-webkit`.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (10)
Notes 4 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (3.6)
  • Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.
Implementation note
  • Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5.1)
Implementation note
  • Safari 4 was supporting an experimental `-webkit-gradient(linear,…)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.
  • Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5)
Implementation note
  • Safari on iOS 3.2 was supporting an experimental `-webkit-gradient(linear,…)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.
  • Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (55)
Implementation note
  • Accepted only in `-webkit-linear-gradient()` and `-moz-linear-gradient()`, not `linear-gradient()`.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (13)
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (3.6)
  • Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5.1)
Implementation note
  • Safari 4 was supporting an experimental `-webkit-gradient(radial,…)` function. This old outdated syntax is still supported for compatibility purposes.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5)
Implementation note
  • Safari on iOS 3.2 was supporting an experimental `-webkit-gradient(radial,…)` function. This old outdated syntax is still supported for compatibility purposes.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (10)
Notes 5 item(s)
Implementation note
  • Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
  • Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (3.6)
  • Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5.1)
Implementation note
  • Safari 4 was supporting an experimental `-webkit-gradient(linear,…)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `repeating-linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.
  • Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5)
Implementation note
  • Safari on iOS 3.2 was supporting an experimental `-webkit-gradient(linear,…)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `repeating-linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.
  • Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (55)
Implementation note
  • Accepted only in `-webkit-repeating-linear-gradient()` and `-moz-repeating-linear-gradient()`, not `repeating-linear-gradient()`.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (10)
Notes 4 item(s)
Implementation note
  • Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (3.6)
  • Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5.1)
Implementation note
  • Safari 4 was supporting an experimental `-webkit-gradient(radial,…)` function. This old outdated syntax is still supported for compatibility purposes.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5)
Implementation note
  • Safari on iOS 3.2 was supporting an experimental `-webkit-gradient(radial,…)` function. This old outdated syntax is still supported for compatibility purposes.
Notes 4 item(s)
Implementation note
  • Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (10)
  • Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.

Syntax

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
  );
}

Live demo

linear-gradient

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

PreviewFullscreen

radial-gradient

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

PreviewFullscreen

repeating-linear-gradient

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

PreviewFullscreen

Use cases

  • Hero and banner surfaces

    Add depth and visual interest to headers, CTAs, or section dividers.

  • Subtle component emphasis

    Differentiate featured cards or progress surfaces with lightweight color variation.

Cautions

  • Strong gradients can lower contrast unpredictably across the surface.
  • Excessive gradient styling can make the interface feel noisy or inconsistent.

Accessibility

  • Check contrast across the full gradient, not just one sampled point.

Related links

Powered by web-features