linear-gradient()
Read More at MDN DocsView SpecSafe to Use
linear-gradient() is considered safe to use.
It’s supported by 94% of global browsers.
Browsers
Version Breakdown
Full Support
Implemented with the vendor prefix: -webkit-
Full Support
Implemented with the vendor prefix: -webkit-
Full Support
Full Support
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Implemented with the vendor prefix: -webkit-
Implemented with the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
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.
Full Support
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Implemented with the vendor prefix: -webkit-
Implemented with the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
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.
Full Support
Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Full Support
Implemented with the vendor prefix: -webkit-
Full Support
Implemented with the vendor prefix: -webkit-
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.
Implemented with the vendor prefix: -o-
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.
Full Support
Implemented with the vendor prefix: -webkit-
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.
Implemented with the vendor prefix: -o-
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.
Full Support
Implemented with the vendor prefix: -webkit-
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.
Full Support
Implemented with the vendor prefix: -webkit-
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.
Full Support
Implemented with the vendor prefix: -webkit-
Full Support
Implemented with the vendor prefix: -webkit-