BASELINE NowYouCanUse.com
Widely Available Gradients
id: gradients

Gradients

The linear-gradient() and radial-gradient() CSS functions and their repeating counterparts create backgrounds that progress smoothly between multiple colors.
Baseline Status: Achieved Widely Available on Jan 29, 2018 (Cross-browser Newly Available since Jul 29, 2015).
Desktop Browser Engine Support
Google Chrome
26
Supported
Mozilla Firefox
3.6
Supported
Apple Safari
7
Supported
Microsoft Edge
12
Supported
Mobile Browser Engine Support
Chrome Android
26
Firefox Android
4
Safari iOS
7
Specifications and References
Specification ↗ Feature XML ↗
MDN Browser Compat Data Keys:
css.properties.background-image.gradients ↗ css.types.gradient ↗ css.types.gradient.linear-gradient ↗ css.types.gradient.linear-gradient.doubleposition ↗ css.types.gradient.linear-gradient.interpolation_hints ↗ css.types.gradient.linear-gradient.premultiplied_gradients ↗ css.types.gradient.linear-gradient.single_color_stop ↗ css.types.gradient.linear-gradient.to ↗ css.types.gradient.linear-gradient.unitless_0_angle ↗ css.types.gradient.radial-gradient ↗ css.types.gradient.radial-gradient.at ↗ css.types.gradient.radial-gradient.doubleposition ↗ css.types.gradient.radial-gradient.interpolation_hints ↗ css.types.gradient.radial-gradient.premultiplied_gradients ↗ css.types.gradient.radial-gradient.single_color_stop ↗ css.types.gradient.repeating-linear-gradient ↗ css.types.gradient.repeating-linear-gradient.doubleposition ↗ css.types.gradient.repeating-linear-gradient.interpolation_hints ↗ css.types.gradient.repeating-linear-gradient.single_color_stop ↗ css.types.gradient.repeating-linear-gradient.to ↗ css.types.gradient.repeating-linear-gradient.unitless_0_angle ↗ css.types.gradient.repeating-radial-gradient ↗ css.types.gradient.repeating-radial-gradient.at ↗ css.types.gradient.repeating-radial-gradient.doubleposition ↗ css.types.gradient.repeating-radial-gradient.interpolation_hints ↗ css.types.gradient.repeating-radial-gradient.single_color_stop ↗ css.types.image ↗