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?
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.