Grow your CSS skills. Land your dream job.

RGBa Browser Support

Published by Chris Coyier

This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers.

RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this:

div {
   background: rgba(200, 54, 54, 0.5); 
}

This allows us to fill areas with transparent color; the first thee numbers representing the color in RGB values and the fourth representing a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque). We have long had the opacity property, which is similar, but opacity forces all decendant elements to also become transparent and there is no way to fight it (except weird positional hacks) Cross-browser opacity is also a bit sloppy.

With RGBa, we can make a box transparent and leave its descendants alone:

Declaring a fallback color

Not all browsers support RGBa, so if the design permits, you should declare a "fallback" color. This color will be most likely be solid (fully opaque). Not declaring a fallback means no color will be applied in browsers that don't support it. This fallback does fail in some really old browsers.

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5); 
}

Do be aware of this bug though, related to not using shorthand in IE 6 and 7.

Browser Support for RGBa

Last updated: 05/14/2010

Browser, Version, Platform Outcome Fallback
Mozilla Firefox 3.x (and up) Works --
Mozilla Firefox 2.x (and down) Doesn't Work Solid Color
Google Chrome (any version) Works --
WebKit - Safari 3.x (and up) Works --
WebKit - Safari 2.x (and down) Doesn't Work --
Mobile Safari (iPhone / iPod Touch / iPad) Works --
Opera 10.x (and up) Works --
Opera 9.x (and down) Doesn't Work Solid Color
Internet Explorer 9 Preview Works --
Internet Explorer 8 (down to 6) Doesn't Work Solid Color
Internet Explorer 5.5 (and down) Doesn't Work No Color
Netscape (any version) Doesn't Work Solid Color
BlackBerry Storm Browser Works --

Data gathered from this demo, which includes more complete browser compatibility list.

A better fallback for IE

Since IE supports conditional stylesheets, we can bust out those and a proprietary Microsoft CSS filter to accomplish the same result:

<!--[if IE]>
   
   <style type="text/css">

   .color-block { 
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
       zoom: 1;
    } 

    </style>

<![endif]-->

UPDATE: As pointed out by a few folks, the alpha value should be the two digits at the start of the string not the end, so I've updated the code above to be correct. (e.g. startColorstr=#50990000 not startColorstr=#99000050)

ANOTHER UPDATE: We're past the point in time where you probably never need to use filter gradients again. But nonetheless, apparently the first two digits ("50" above) isn't 50%. You have to use "hexadecimal". As written to me by Julio Loayza:

rgba(255, 255, 255, 0.5) wouldn't be equivalent to (startColorstr=#50FFFFFF,endColorstr=#50FFFFFF)
rgba(255, 255, 255, 0.5) would be equivalent to (startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)

00 is transparent and FF opaque.

More Information

Other Examples


Background image visible through dark content areas


Border of the facebox plugin uses RGBa borders


RGBa galore on 24 ways

Color Variations

Instead of having to remember or look up a bunch of different hex values for shades of gray, you can just use RGBa to adjust pure black to a shade that works e.g. rgba(0, 0, 0, 0.3); That is, assuming transparency is cool for whatever the application is (great for shadows, not great for text). Don't have to be black either obviously, you could make a whole monochromatic color scheme with any color this way.

Also, HSLa is a little easier to work with than RGBa if you need to be adjusting colors manually through code.

Comments

  1. Great article Chirs!

    You’ve really covered it well

  2. Permalink to comment#

    Nice discussion on rgba… don’t use rgb colors that often, but once this is more cross-browser I am sure it will be used more.

  3. Permalink to comment#

    I wasn’t aware of the IE hack functionality … very nice!

  4. Permalink to comment#

    Agree w/ Brenelz, and yes, thanks for laying out that IE hack from Hedger so clearly.

  5. Permalink to comment#

    I hope the browser start using this, as it seems a reasonable way to do it, easy to program/learn.

  6. Michael
    Permalink to comment#

    FYI, IE 8 RC1 on Vista doesn’t support it either. :(

  7. Chris
    Permalink to comment#

    Can we just get rid of IE? I’m sick of spending so much time pampering it.

  8. Nice! Never knew about this.

  9. EVula
    Permalink to comment#

    IE 5.5 not supporting it? Understandable.

    IE 8? Inexcusable. I’ll just toss this on the incredibly long list of reasons that I get rabid anytime someone says they use IE.

  10. Permalink to comment#

    Very useful!

    Big surprise that IE doesn’t support this, not even IE8.

  11. Permalink to comment#

    IE not supporting it? sounds like something new! ;-) nice hack, keep up the great work.

  12. IE gives me sucha boner.

  13. Sebastian Steinmann
    Permalink to comment#

    Opera 10 will support RGBa too ref: http://dev.opera.com/articles/view/presto-2-2-and-opera-10-a-first-look/#opacity

    And cant this be done with a png image too?

  14. Anonymous
    Permalink to comment#

    With RGBa, we can make a box transparent and leave it’s child elements alone

    You should remove the apostrophe here.

  15. Opera 10 Alpha and later versions fully support RGBA and HSLA.

  16. thatstandardsguy
    Permalink to comment#

    Just yesterday I read an article about using opacity and was going to write about RGBa being a more modern, even forward-thinking approach.

    Great article Chris, personally I wouldn’t use the IE fix as I believe there’s a performance hit with using CSS expressions (if performance is an issue for the site in question) but agree it completes the article to discuss the method.

    Personally, I would settle for a solid colour being used by IE, but project meetings may dictate otherwise ;-)

  17. I used this already in the last month a web site swe designed. The fallback worked well since it was a dark grungy background anyway. If you are curious http://www.2x3campaign.com the prefooter part.

    Thanks for sharing.

  18. Permalink to comment#

    Please, fellow designers, stay away from IE hacks! I cannot stand them anymore.

  19. Permalink to comment#

    Really slick… I always used to use a 1 pixel semi transparent png to achieve the same effect. Only dissapointment is the lack of widespread browser support.

  20. kesc
    Permalink to comment#

    Very nice and informative article, Chris. I was not aware of the IE fallback, that’s a nice trick.

    Anyhow, I’ll stay away from RGBa until browser support (read: IE (besides, in my native country Opera has a bigger marketshare than worldwide)) catches up.

  21. Thank you for sharing… :D
    Biju Subhash

  22. Permalink to comment#

    I’m excited to see more of the benefits of CSS3 in action and watch the web get better over time… As always, thanks for all the great tips & tricks.

  23. Ant

    Hm, I used that fallback:

    background:url(cyan_transparent_50.png);
    background:rgba(0,255,255,.5);

    Didn’t know about filter thingie, I’ll try it.

    • traq

      agreed. the png fallback covers IE and most other non-supporting browsers; less code, less work. plus it’s how everyone did it for years anyway, so it’s less confusing.

  24. Errrm… the Trick with the Fallback only works with the
    /*The Fallback*/ Comment in the CSS, or?

  25. great article! i wasn’t that interested in the transparent thing to begin with, and thus not that interesting in the article, until i saw the website that you put in “24 ways”.

    that is a great use of transparency and very inspiring…

    having been inspired, and wanting to know how to accomplish it and having IE behave itself, this article is absolute gold dust.

    LEGEND!

  26. lklk

    As every once and this time is to be Css Tricks lavduar your work.

    Hello Hello from Brussels.

  27. Awesome article. I have used this every once in a while, but never mess with IE fall backs though I should.

    Now we can let all browsers play nice. Thanks Chris!

  28. dave

    IE GO DIE

    please

  29. Would it not be easier to use a 1px by 1px png and use the “belated” png fix script for IE?

  30. Just tested it and rgba also works on the palm webos browser (palm pre/+ palm pixi/+), which makes sense as is webkit based.

  31. chetan ghauran

    Wanted to start my day with learning something new , and that’s exactly what I got .
    (chris I am following u on twitter (*_*)

  32. flashmac

    Nice quick tut, cheers Chris.
    How come your color code is #99000050? That a typo or am I learning two things here?

    • This is for the IE fallback. The first six are the hex code and the last two are the alpha value.

    • Hey Chris,

      Can you just verify Deos’ comment below?

      Should a 10% opacity of white be #10FFFFFF or #FFFFFF10 ?

      Thanks!

  33. Big surprise that IE doesn’t support this, not even IE8.

  34. Thank you very much for your article, Chris. Actually, it would be very interesting to see an article covering the support of HSLa in modern browsers, too. Also, more general article about HSL would be nice — to be honest, I haven’t see many around.

    • Thanks for stopping by Vitaly =)

      I actually don’t know much about HSL. I see in my Photoshop CS5 color picker, those values are present so those values would be easy enough to snag and use. I’m just not sure exactly what the advantages to using it are? I guess at first glance it seems like an easier syntax for creating color variations without needing to switch over to a color picker (e.g. need a duller green, just lower the saturation value). I’ll have to note this down as something to look more into. =)

  35. Jacob Bixler

    Did you design the Rick Wilcox site? it looks pretty awesome

  36. what? IE doesn’t support it?? well, that’s just unheard of!! (sarcasm meter explodes…)

    great tip, chris – i will definitely try to incorporate this with one of my next sites. thanks!

  37. Support in the new versions of web browsers looks good. Probably there is no need to worry about the old ones, because users are upgrading their software and vendors implemented in their browsers automatically updating functions. And Internet Explorer 9 is planned to be released in 2011 – http://en.wikipedia.org/wiki/Internet_Explorer#Internet_Explorer_9

  38. Chris, this is fantastic. Worked like a charm. Thank you!

  39. The hedgerwow.com site seems to be down… :(

    Awesome article, and just what I needed. I’ve been fighting with a new website that uses a lot of transparency, and this may totally save my butt!

    Here’s a more in depth explanation of the IE hack for rgba transparency. There’s even a handy-dandy tool to translate the rgba values to hex code. Nice.

    http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

  40. Sithlord

    Hi,

    Im no friend of IE either, but in this case you should consider, that CSS2 is standard. RGBA as CSS3 is no standard!
    So its not really a bug in IE.

    By the way: in some cases its worth taking a second look before dooming IE. I had differnt problems in IE, while in FireFox everything was fine, although the error was in my source code, and Firefox was just not that ‘strict’.

    And lately I’m getting some problems with Firefox, too.
    For example some flickering with jQuery (works perfect in IE6-8 and Safari)

    Anyway:
    Thanks for the solution in IE8 – in my case
    filter: alpha(opacity=’80′);
    was fine enough.
    But I will keep the gradient workaround in mind.

    Thanks!
    Sithlord

  41. Finn
    Permalink to comment#

    The IE fallback works only with the “background”-property, not with “background-color” (in IE6 & IE7 – IE8 is nice). It’s so sad :(

  42. Permalink to comment#

    Found anyone a solution to calculate the IE Fallback (filter gradient) with sass/less/compass or in any other way?

  43. this is a simple (javascript) way to calculate the alpha prefix for the IE filter non-sense.

    parseInt((n/100) * 255, 10).toString(16).toUpperCase();

    pop that into console. replace n with the percentage, and it will spit out the HEX value for the alpha prefix.

    OR

    expressed as a function, something like this …

    ps: thanks chris for doing the leg work. :D

  44. Hiya Chris. Call me crazy lazy but is there a shortcut for rgba white?

    I can’t tell you how tired I get of writing out 255,255,255, LOL.

    I know, I know, SASS, LESS. I’ll be there soon.

    ~ s

    • Hi Scott,

      Why not just use the word white?

      color: white;

      Or I prefer to use hex codes:

      color: #FFFFFF;

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".