RGBa Browser Support

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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. Here’s the full mapping:

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

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.