Kilian Valkhof

Front-end & user experience developer, Jedi.

How to use RGBA() in IE

CSS & HTML, 31 May 2010

The modern browsers all have rgba(), giving you a semi-transparent background colour while keeping the foreground elements (text, images) fully opaque. But if you want to use that in your design, what about IE? Here’s how to do it.

A while ago I made a design with lot’s of semi transparent areas (I know, stupid me, it’s only 2010 after all) and solved that in modern browsers with rgba(). All fine and well, I threw in some border-radius and box-shadow, and from Opera through Firefox to Webkit, it looked increasingly better. Great, I’m all for progressive enhancement. Except it of course looked really bad in IE. I set out to find an acceptable solution.

Gradients, where?

For general opacity, we have the alpha filter. but that sets the opacity of foreground elements as well, making it useless in this case. Looking a bit further, I found the gradient filter. Seeing as how I needed transparency and not gradients, this didn’t seem very useful.

But the gradient filter supports some fun stuff. While it’s not mentioned anywhere in the msdn article, the gradient filter has an #ARGB syntax. That’s right, the A is for Alpha. No, I don’t know why it’s at the front.

Anyway, Gradients don’t have to be between two different colours, right? You can just as easily go from white…to white. So that’s what I did:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);

And there you go, alpha-transparent backgrounds!

Gotcha’s

Of course, it’s not that easy. rgba() notation is in values from 0 to 255, with the a being a floating point between 0 and 1, and #ARGB is in hexadecimal format. You need to convert rgba() to #ARGB to make it useful.

I’ve saved you the math, here’s an easy (to and from) converter:

Convert to and from rgba() and #ARGB



More gotcha’s (or: Oh, IE!)

Of course, just finding the correct value for #ARGB isn’t the only problem you will have. There are more downsides. For one, the code above isn’t actually the one you have to write. The code below is:

background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
zoom: 1;

Firstly, you have to set the actual background to none, then you have to use -ms-filter for IE8, filter for everything below, and set zoom:1; to make sure the element has hasLayout (or else the filter doesn’t work.)

Apart from the code, there are two other downsides: When you use filters, ClearType gets disabled. That’s a pretty big downside, since non-cleartyped text looks hideous. According to some you can fix it, but YMMV.

Secondly, as soon as you place the website in an iframe, say goodbye to the A in your gradient. the backgrounds will lose there transparancy and look hideous. I learned that the hard way. if you use the gradient filter, don’t display your site in an iframe.

Should you use it?

Using stuff like this, it’s a bit like we’re dragging IE along, kicking and screaming. And that’s what we do. We want to move forward, so we find ways to get around the limitations of lesser browsers. Whether losing ClearType is worth it depends wholly on the design. In my case it did, in your case, it might not.

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. I noticed you’re using lowercase values for the startColorstr and endColorstr parameters. Have you tested this? I’m pretty sure these need to be uppercase.

  2. Hrm, this demo page uses lowercase parameters as well, and it seems to work. My bad!

  3. Vasil Popov

    ARGB is the standart of how colors are stored in Windows, the filter: DXImageTransform.Microsoft. …. is a direct call to the DirectX api, so that`s why the format is ARGB, not something else. The rgba() fucntion is something different. ;)
    Although, this browser (IE6) … i feel, it did not support anything, its like written from a college students :) and those bugs … and IE7 i worse, I think, excepting that it support semi-transparent PNGs.
    Also nice article.

  4. Rae

    This beats using a png to whip IE into shape any day (which then of course doesn’t work in IE6 anyhow). Thanks for sharing.

  5. […] for IE to be able to see your transparent handywork then you could always check out this post on how to make RGBA work in […]

  6. Brilliant bit of research. Thanks for sharing. I’ve been using transparent PNGs as fallback, but this saves a useless HTTP request. It’s really too bad rgba() is not supported widely — I use it for border colors and type styling as well, which causes IE to choke and die.

  7. […] Read more at kilianvalkhof.com → […]

  8. I’ve been trying this in the past, but the cleartype issue made me fall back on pngs instead. But I’m sure it has it’s uses.

    Anyone has any idea which is slower? An extra http request fro a tiny png or the css expression?

  9. rilliant bit of research. Thanks for sharing. I’ve been using transparent PNGs as fallback, but this saves a useless HTTP request. It’s really too bad rgba() is not supported widely — I use it for border colors and type styling as well, which causes IE to choke and die.

  10. […] – box-shadow – RGBA color values – text-shadow – Cursor Styles – IE Gradient Filter – convert RGBA() to #ARGB (for the filter) This entry was posted in CSS. Bookmark the permalink. ← Two-legged […]

  11. […] folosi rgba() doar pentru backgrounds. Oricum, între a folosi plugin-ul și a folosi soluția asta, parcă aș alege varianta a […]

  12. Personally, I am not a big fan of using the ms filters. They feel a bit clunky to me. What I use for my RGBa fallbacks (remembering that browsers such as FF 2.x also do not have RGBa support) is to use a semi-transparent png. This of course requires a JavaScript png fix for IE6, but acts as a nice fallback for all the browsers that do not support RGBa.

    I know this doesn’t give you the flexibility of changing a few figures in the stylesheet to alter the appearance, but this is normally something I can live with.

  13. Convert To And From Rgba() And #ARGB calculator is so incredibly useful!! In fact the whole article clears up a lot of questions and it is very well written.

    Bookmarked for future reference thanks ^_^

  14. […] Thanks to Kilian Valkhof for this rgba/#ARGB converter code snippet! […]

  15. Corrado Fiore

    It may be worth noting that IE7 won’t draw any gradients unless the element contains at least one block-level child (e.g. <ul>&lt/ul/gt;).

    Thumbs up for putting online your handy converter!

  16. Corrado Fiore

    Sorry for the typo. <ul></ul> is the correct code in the example.

  17. Yago Méndez Vidal

    The reason why the syntax is #ARGB but the function is rgba is a matter of bytes, addresses and all that stuff:
    – Humans take the common formula “RGB” and add the new component “A” at the end since is less important, it’s an additional information to the color.
    – Computers (use to) use 32 bits blocks to store information, this is 4 bytes (4 x 8 = 32). To allow operations the information is stored right to left RGB and the 1st byte was unused, 2nd for red, 3rd for green and 4th for blue. When Alpah was introduced it was agreed that the A was stored in the 1st byte, and so you could operate colors with with and without alpha, just ignoring the 1st byte (with a mask) instead of shifting the bytes left and right which means more operations and with a higher computational cost.
    Notice that #aarrggbb means an address, this is hex code, machine info, and rgba() is a function, human language.

  18. […] Jak to działa? Po pierwsze ustawiamy przezroczyste tło dla elementu (można też ustawić background:none), po drugie aplikujemy gradient (tak gradient!), któremu jako kolor startowy i jako kolor końcowy ustawiamy tą samą wartość. Wartość jest podana szesnastkowo, gdzie pierwsze 2 cyfry to przezroczystość a kolejne 6 to wartość koloru. Na końcu poprawiamy błąd z hasLayout atrybutem zoom:1. Jeśli potrzebujesz konwertera do przeliczania RGBa do ARGB to znajdziesz go TUTAJ. […]

  19. […] – box-shadow – RGBA color values – text-shadow – Cursor Styles – IE Gradient Filter – convert RGBA() to #ARGB (for the filter) This entry was posted in Uncategorized. Bookmark the permalink. ← PHP […]

  20. dmsumon

    Thanks a lot man! This article saved my life. I am very much thankful to you.

  21. […] more information you can visit reference Tutorial at: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/ This entry was posted in Uncategorized and tagged CSS Gradient Effect, Gradient Effect / use […]

  22. This article was an absolute livesaver. It inspired me so much that I integrated your conversion code into a LESS mixin for anyone to use: https://github.com/illepic/ie-rgbabg

    Thank you!

  23. […] How to use RGBA() in IE • CSS & (X)HTML • Kilian Valkhof background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff); zoom: 1; Firstly, you have to set the actual background to none, then you have to use -ms-filter for IE8, filter for everything below, and set zoom:1; to make sure the element has hasLayout (or else the filter doesn’t work.) […]

  24. Ruti

    Thanks a lot!!
    this artickle saved me a lot of time!!

  25. […] How to use RGBA() in IE […]

  26. […] Here you could find a converter to calculate the correct RGBA value. […]

  27. […] Here is a tool to help you convert rgba to #ARGB. […]

  28. […] Here is a tool to help you convert rgba to #ARGB. […]

  29. […] Here is a tool to help you convert rgba to #ARGB. […]

  30. […] Here is a tool to help you convert rgba to #ARGB. […]

  31. […] Here is a tool to help you convert rgba to #ARGB. […]

  32. I have used your online method to create software to generate transparency code for IE automatically….http://codeslibrary.net/files.php

  33. maria pia

    Hello! I’m trying to have an alpha background but keep the look in mozilla, IE and Chrome, when I can work for IE does not work for Chrome and Mozilla and vice versa. Can anyone help?

  34. Jonáš

    maria pia:
    Try to put underscore before reseting background:
    _background:none;
    I don’t know whether is this absolutely correct, but it worked for me.

    I’ve also solved the whole problem with RGBA with PIE: http://css3pie.com/ PIE makes IE compatible with many CSS3 features.

  35. Tony

    thanks

  36. […] không chấp nhận chế độ màu rgba mà chỉ sử dụng #ARGB. Các bạn có thể vào  convert rgba to #ARGB để chuyển đổi màu rgba sang màu  #ARGB […]