CSS3 Linear gradient on IE10

Question

We have decided to finally support Internet Explorer, however only currently from 10. I have been reading up on the CSS support IE has and I wasn't sure if it was possible to currently do this in IE?

background: linear-gradient(bottom right,circle,rgba(0, 0, 0, .04),transparent 80px,transparent 100%);

Is there anyway to do this or does it still require falling back to a png?

Answer 1

Your OP declaration will not work. No, falling back to an image is not necessary. Your declaration is just NOT valid. Explain what you want to do between a 'linear' or a 'circular' gradient .. or just go to http://www.colorzilla.com/gradient-editor/ and rebuild your line.

You are looking for something like this (cross-browser backward compatible):

.shadow {

background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0.03) 31%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 100%);
background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
}

jsFiddle with yours and mine where you can play

[Post notes]

About IE: the "filter" rule is for IE9-, preview releases of IE10 used a "-ms" prefixed syntax, and IE10 onwards use the standard syntax.

For detailed information, see the linear-gradient page on MDN.

Answer 2

I tested in Windows 7, IE10.0.9200.17148 from the modern.ie

And background-image: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 100%); works.

If you have an IE10, test it here: https://fiddle.jshell.net/txLtok1w/1/

...and report whether gradient is shown or not, together with your OS and IE version/minor version.