Can You Use Rgba Colours in Gradients Produced with Internet Explorer's Filter Property

Can you use rgba colours in gradients produced with Internet Explorer’s filter property?

Stop colors can be specified in #AARRGGBB notation, where AA represents the alpha. For example, #ffff0000 is fully-opaque red.

This produces a 100% red to 50% black horizontal gradient:

filter: progid:DXImageTransform.Microsoft.Gradient(
    GradientType=1, 
    StartColorStr='#ffff0000', 
    EndColorStr='#80000000'
);

jsFiddle preview

Gradient colors in Internet Explorer

Look at the custom CSS filters IE can handle
http://msdn.microsoft.com/en-us/library/ms532847.aspx

rgba background with IE filter alternative: IE9 renders both!

I’ve come up with a hacky workaround that I thought I'd share.

IE9 and above supports the :not() CSS pseudo selector. By using an attribute that doesn’t exist on an element we can get IE9 to disable it's filter gradient:

div {
    width: 200px;
    height: 200px;

    /* For FF, Chome, Opera, IE9+ */
    background: rgba(0,0,255,0.5);

    /* For IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}

div:not([dummy]) {
    /* IE9 only */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
}

I ended up using this because my transparent div only features once. It also seemed a little neater keeping things to CSS, rather than using conditional comments in the HTML.

Edit: In support of other answers, I found this article from the Microsoft dev team encouraging developers to use conditional comments, not CSS workarounds like mine.

Deciphering HEX RGBA for MS-filters in CSS

Translating an rgba alpha to the gradient filter format is very simple. It's a mapping from the interval [0, 1] to the interval [0, 255], represented in hex. To do the conversion, then, just multiply by 255 and convert to hex. For example, opacity in rgba(rr, gg, bb, 0.5) ends up as 7F (or 80, if you're rounding up):

0.5 * 255 = 127.5 (base 10)
127 (base 10) = 7F (base 16)

I assume you're not asking about how to convert between base 10 and base 16.

CSS gradient, transparent colors in IE?

This works:

#000000FF

so:

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#000000FF, endColorstr=red);

And, not tested, but I hear that 0 works as well. Then it's startColor, not startColorstr.

IE adds blue border to div where css gradient is used

Change the filter to:

filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='#00cccccc', EndColorStr='#ffcccccc'); /* IE6–IE9 */

The filter doesn't allow “transparent” as a color value, but it does allow you to use an 8-digit hex reference, where the first two digits specify the opacity of the colour (just like the last value in rgba() color references).

More on using RGBA and transparency & using MS Filters

if the scary maths bit gets you, you can find e.g. 0.6 transparency in Windows calculator, open it in scientific view, do 255*0.6 = 153 then click the "hex" checkbox for the conversion = 99

in the example above it was starting at the the fully transparent (0.0 opacity) = 255*0 = hex value "00" through to fully opaque (1.0 opacity) = 255*1 = hex value "ff"

Update As kindly linked by thirtydot in the comments, here's a handy converter from RGBa to MS Filter syntax

IE explorer issue with linear-gradient

Your code works just fine in Internet Explorer 10. If you wish to have a gradient in earlier versions, such as 9 and below, you should consider using the filter property. You can generate a gradient with those as well.

See: Gradient Filter

html {
    min-height: 100%;
    background: #000;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFCCCCCC, endColorstr=#FFFFFFFF);
    background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%);
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
    background: -o-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
    background: linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
}

CSS background opacity with rgba not working in IE 8

Create a png which is larger than 1x1 pixel (thanks thirtydot), and which matches the transparency of your background.

EDIT : to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.

---

Related Topics