Is browser prefix still required for linear-gradient?

Question

Do I still need to use the browser prefixes for the linear-gradient property?

background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
    background-image:    -moz-linear-gradient(top, #2F2727, #1a82f7);
    background-image:     -ms-linear-gradient(top, #2F2727, #1a82f7);
    background-image:      -o-linear-gradient(top, #2F2727, #1a82f7);

I only want the support of latest browser versions. I tried following, but does not work.

background-image:    linear-gradient(top, #2F2727, #1a82f7);

possible duplicate of [How do I find out when I can safely drop vendor prefixes for a CSS3 property?](http://stackoverflow.com/questions/9211602/how-do-i-find-out-when-i-can-safely-drop-vendor-prefixes-for-a-css3-property) and [Do we have to use non-standard/browser specific CSS vendor prefixes anymore?](http://stackoverflow.com/questions/9401830/do-we-have-to-use-non-standard-browser-specific-css-anymore) (plus some similar questions linked in there) — BoltClock, Mar 03 '12 at 20:14
@BoltClock, well, I thought may be there is some change in the syntax for the new browsers. — user1117313, Mar 03 '12 at 20:21
The problem in the example is that it's using the old syntax, which only works with prefix (at least in chrome). So instead of "top", it should be "to bottom" which is the newer syntax and will work without prefix. — , Jan 23 '19 at 10:25

score 14 · Accepted Answer · edited Jun 25 '17 at 16:18

According to Can I use, as of June 2017, 93.75% of Internet usage is on a browser that supports unprefixed linear gradients (97.2% in the US). For most people, this means you don't need to prefix your gradients anymore.

Below is the first compatible version and release date for the most common desktop browsers:

IE v10, released September 2012
Firefox v16, released August 2012
Chrome v26, released February 2013
Safari v6.1, released October 2013
Opera 12.1, released November 2012

Information on compatibility history of other browsers (including mobile browsers) is available at Can I use.

score 7 · Answer 2 · edited Jun 25 '17 at 16:19

7

You can now use:

linear-gradient

without prefixes and it will be supported by IE10+ as well as current versions of Safari, Chrome, and Firefox. For more detailed info see: http://caniuse.com/#search=linear-gradient

But short answer is: No prefix required.

edited Jun 25 '17 at 16:19

Nathan Arthur

8,287
7
55
80

answered Oct 27 '14 at 17:20

Jeremy Knight

604
7
10

score 0 · Answer 3 · answered Mar 04 '12 at 07:20

The following example

     background: rgb(238,238,238); /* Old browsers */
     background: -moz-linear-gradient(-45deg,  rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(-45deg,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(-45deg,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* IE10+ */
     background: linear-gradient(-45deg,  rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

shows that the linear-gradient is more beyond simple prefixes. For instance, the one that runs on IE requires a prefix and DXImageTransform object. Hence, linear gradient is more of an SVG attribute that requires some extra work beyond prefixes.

Is browser prefix still required for linear-gradient?

3 Answers3

Linked