Gradients in Internet Explorer 9

Question

Does anyone know the vendor prefix for gradients within IE9 or are we still supposed to still be using their proprietry filters?

What I've got for the other browsers is:

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

As a bonus does anyone know Opera's vendor prefix as well?

Even though I've selected an answer - this is only relevant at this point in time. If this changes, can someone update the thread? Much appreciated. — Sniffer, Oct 15 '10 at 07:25
Totally. I doubt IE 9 will implement gradients now though, as it’s in beta. — Paul D. Waite, Oct 15 '10 at 08:18
IE is just a horrible browser all together, doesn't support inline blocks, position values break for no reason, no gradient support, slow as all hell... Let's all start warning users that they need to stop using IE instead of wasting our time supporting a sub standard browser. Personally I have been outright stopping IE users from viewing any of my pages for years now (direct them to get a real browser) and I have never lost a sale. Do some research and you'll see IE accounts for < 5% of all internet traffic and < 1% of sales. Why are we supporting it? — , Jan 02 '13 at 21:05
Dan, I'd be interested as to where your numbers are coming from, I can't find a single source stating that IE is <5% of traffic. — Jamie Taylor, Feb 01 '13 at 14:39
Jamie, a common mistake developers make is they view the visitor statistics on their own programming/web-dev related website and apply those stats to the web as a whole. IE is by far the most used web browser and it's depressing how many people still use IE 8 and 9. — Gavin, Nov 18 '13 at 06:50
@Gavin - actually, by [most accounts](http://en.wikipedia.org/wiki/Usage_share_of_web_browsers) Chrome pulled even with IE some time in 2012 and is now by far the dominant browser (both desktop and mobile). But yes, IE is still far from <5% of traffic. — Alex, Jan 27 '14 at 14:17

score 58 · Answer 1 · edited May 01 '12 at 20:16

58

Looks like I'm a little late to the party, but here's an example for some of the top browsers:

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

Source: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Note: all of these browsers also support rgb/rgba in place of hexadecimal notation.

edited May 01 '12 at 20:16

MrFusion

912
7
16

answered Jun 01 '11 at 06:18

Kevin Arthur

982
1
6
5

10

I wouldn't consider IE10 to be a major browser yet. – David Murdoch Nov 28 '11 at 20:14
3

@DavidMurdoch that's techincally true, but it doesn't make sense not to add the proprietory exension to your CSS, since we know what it will be. After all, IE10 is destined to become a major browser. – thepeer Dec 04 '11 at 12:33
4

@Robotsushi although it doesn't answer the question for IE9 (the selected answer does, which is probably why it was chosen), this question is on the first page of Google results for "internet explorer css gradients," so there isn't any harm in having something useful here now that IE10 is almost ready for Windows 7. – Kevin Arthur Nov 29 '12 at 02:41
The latest versions of Firefox and Opera support the W3C standard. (I tested on Firefox 19 and Opera 12.14 on Windows 7) – Jeroen Versteeg Mar 14 '13 at 08:55
2

Since this is top-voted answer for the question, which addresses IE9, it should add the filter: to the end so that it includes IE9 support. – Joel Coehoorn May 23 '13 at 15:39

goksel · Answer 2 · 2012-02-16T00:22:37.260

The best cross-browser solution is

background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/

score 45 · Accepted Answer · answered Oct 14 '10 at 17:02

45

You still need to use their proprietary filters as of IE9 beta 1.

answered Oct 14 '10 at 17:02

Gaurav

12,662
2
36
34

2

According to http://css3please.com, IE10 looks due to support CSS gradients, which is good news... – Sniffer Apr 20 '11 at 11:22
css3please.com helped me find a solution to mine. Thanks – redolent Apr 25 '13 at 23:00

score 37 · Answer 4 · answered May 08 '11 at 12:41

IE9 currently lacks CSS3 gradient support. However, here is a nice workaround solution using PHP to return an SVG (vertical linear) gradient instead, which allows us to keep our design in our stylesheets.

<?php

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

header('Content-type: image/svg+xml; charset=utf-8');

echo '<?xml version="1.0"?>
';

?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#<?php echo $from_stop; ?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?php echo $to_stop; ?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#linear-gradient)"/>
</svg>

Simply upload it to your server and call the URL like so:

gradient.php?from=f00&to=00f

This can be used in conjunction with your CSS3 gradients like this:

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

If you need to target below IE9, you can still use the old proprietary 'filter' method:

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

Of course you can amend the PHP code to add more stops on the gradient, or make it more sophisticated (radial gradients, transparency etc.) but this is great for those simple (vertical) linear gradients.

Elegant solution. FYI: I just confirmed SVG is _not_ downloaded for browsers supporting `linear-gradient`. — Jonathan Cross, Mar 15 '13 at 15:44
I wonder if there's a way to cache these svg files once they are created. — Mike Kormendy, Oct 18 '14 at 18:09
A more robust question would be to find out what the performance is on both time and server load for requesting a cached file vs. generating a file stream each and every time. — Mike Kormendy, Oct 18 '14 at 18:15
PHP should never have knowledge or help in your UI design. Keep the client needs on the client. — Alex White, Oct 24 '14 at 19:17

score 11 · Answer 5 · answered Jun 27 '12 at 08:43

The code I use for all browser gradients:

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.

Update:

Here is a LESS Mixin (CSS) version for all you LESS users out there:

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}

As a LESS user, I was hunting around for a way to make the gradients work in IE9 as well. I found a blog article detailing how to generate the SVG: http://blog.philipbrown.id.au/2012/09/base64-encoded-svg-gradient-backgrounds-in-less/ — James Long, Jul 02 '13 at 16:53

score 6 · Answer 6 · answered Mar 01 '11 at 22:01

Opera will soon start having builds available with gradient support, as well as other CSS features.

The W3C CSS Working Group is not even finished with CSS 2.1, y'all know that, right? We intend to be finished very soon. CSS3 is modularized precisely so we can move modules through to implementation faster rather than an entire spec.

Every browser company uses a different software cycle methodology, testing, and so on. So the process takes time.

I'm sure many, many readers well know that if you're using anything in CSS3, you're doing what's called "progressive enhancement" - the browsers with the most support get the best experience. The other part of that is "graceful degradation" meaning the experience will be agreeable but perhaps not the best or most attractive until that browser has implemented the module, or parts of the module that are relevant to what you want to do.

This creates quite an odd situation that unfortunately front-end devs get extremely frustrated by: inconsistent timing on implementations. So it's a real challenge on either side - do you blame the browser companies, the W3C, or worse yet - yourself (goodness knows we can't know it all!) Do those of us who are working for a browser company and W3C group members blame ourselves? You?

Of course not. It's always a game of balance, and as of yet, we've not as an industry figured out where that point of balance really is. That's the joy of working in evolutionary technology :)

score 4 · Answer 7 · answered Oct 15 '10 at 16:01

4

I understand that IE9 still won't be supporting CSS gradients. Which is a shame, because it's supporting loads of other great new stuff.

You might want to look into CSS3Pie as a way of getting all versions of IE to support various CSS3 features (including gradients, but also border-radius and box-shadow) with the minimum of fuss.

I believe CSS3Pie works with IE9 (I've tried it on the pre-release versions, but not yet on the current beta).

answered Oct 15 '10 at 16:01

Spudley

166,037
39
233
307

Thanks Spudley. I'm using CSS3Pie on IE6 to 8, but I was hoping to get away from using it on IE9! I've got a separate stylesheet for each IE with my CSS3Pie styles in the IE8. As long as gradients is the only thing missing from the CSS3 I currently use, I'll be adding another stylesheet for IE9 without using CSS3Pie if I can get away with it. – Sniffer Oct 15 '10 at 16:10
I didn't even see this post, my bad. Just wrote an answer and voted to delete it with the same info. Note: Be wary of the known issues: http://css3pie.com/documentation/known-issues/ – NateDSaint Jul 15 '11 at 17:32

Paul D. Waite · Answer 8 · 2010-10-15T15:55:32.887

2

Not sure about IE9, but Opera doesn’t seem to have any gradient support yet:

http://www.opera.com/docs/specs/presto26/#css

No occurrence of “gradient” on that page.

There’s a great article by Robert Nyman on getting CSS gradients working in all browsers that aren’t Opera though:

http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

Not sure if that can be extended to use an image as a fallback.

edited Oct 15 '10 at 15:55

answered Oct 14 '10 at 16:55

Paul D. Waite

96,640
56
199
270

1

That surprises me, as Opera are usually at the forefront of implementing the standards. Thanks for the answer Paul. – Sniffer Oct 15 '10 at 07:24
1

I don’t think gradients have made it into a standard yet though. As I understand the process, new CSS features tend to be implemented in a browser, then eventually specified in a standard. I believe the WebKit team first implemented gradients in CSS (unless you count Microsoft and their `filter` stuff, which doesn’t really qualify as CSS in my book). Firefox have now followed them, but there doesn’t seem to be anything in a W3C CSS draft spec yet: see http://www.google.co.uk/search?hl=en&source=hp&q=gradient+site:www.w3.org – Paul D. Waite Oct 15 '10 at 08:17

score 2 · Answer 9 · answered Apr 05 '11 at 22:35

As of version 11, Opera supports linear gradients with the -o- vendor prefix. Chris Mills wrote a Dev.Opera article about it: http://dev.opera.com/articles/view/css3-linear-gradients/

Radial gradients are still in the works (both in the spec, and within Opera).

score 1 · Answer 10 · answered Jul 12 '12 at 09:42

1

Use an Gradient Generator - and everything will be perfect ;) http://www.colorzilla.com/gradient-editor/

answered Jul 12 '12 at 09:42

Jules

3,105
2
27
33

Gradients in Internet Explorer 9

10 Answers10

Linked

Related