{"id":2151,"date":"2010-05-19T00:01:10","date_gmt":"2010-05-19T07:01:10","guid":{"rendered":"http:\/\/css-tricks.com\/?p=2151"},"modified":"2018-09-28T07:06:39","modified_gmt":"2018-09-28T14:06:39","slug":"rgba-browser-support","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/rgba-browser-support\/","title":{"rendered":"RGBa Browser\u00a0Support"},"content":{"rendered":"
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.<\/div>\n

RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this:<\/p>\n

div {\r\n   background: rgba(200, 54, 54, 0.5); \r\n}<\/code><\/pre>\n
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<\/tt> property, which is similar, but opacity<\/tt> forces all decendant elements to also become transparent and there is no way to fight it (except weird positional hacks<\/a>) Cross-browser opacity<\/a> is also a bit sloppy. <\/p>\n
With RGBa, we can make a box transparent and leave its descendants alone:<\/p>\n
\"\"<\/p>\n
<\/p>\n
Declaring a fallback color<\/h3>\n
Not all browsers support RGBa, so if the design permits, you should declare a “fallback” color. This color will be most likely be solid<\/strong> (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<\/em> old browsers.<\/p>\n
div {\r\n   background: rgb(200, 54, 54); \/* The Fallback *\/\r\n   background: rgba(200, 54, 54, 0.5); \r\n}<\/code><\/pre>\n
Do be aware of this bug<\/a> though, related to not using shorthand in IE 6 and 7.<\/p>\n
Browser Support for RGBa<\/h3>\n
Last updated:<\/strong> 05\/14\/2010<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Browser, Version, Platform<\/th>\nOutcome<\/th>\nFallback<\/th>\n<\/tr>\n
Mozilla Firefox 3.x (and up)<\/td>\nWorks<\/td>\n — <\/td>\n<\/tr>\n
Mozilla Firefox 2.x (and down)<\/td>\nDoesn’t Work<\/td>\nSolid Color<\/td>\n<\/tr>\n
Google Chrome (any version)<\/td>\nWorks<\/td>\n — <\/td>\n<\/tr>\n
WebKit – Safari 3.x (and up)<\/td>\nWorks<\/td>\n — <\/td>\n<\/tr>\n
WebKit – Safari 2.x (and down)<\/td>\nDoesn’t Work<\/td>\n — <\/td>\n<\/tr>\n
Mobile Safari (iPhone \/ iPod Touch \/ iPad)<\/td>\nWorks<\/td>\n — <\/td>\n<\/tr>\n
Opera 10.x (and up)<\/td>\nWorks<\/td>\n — <\/td>\n<\/tr>\n
Opera 9.x (and down)<\/td>\nDoesn’t Work<\/td>\nSolid Color<\/td>\n<\/tr>\n
Internet Explorer 9 Preview<\/td>\nWorks<\/td>\n — <\/td>\n<\/tr>\n
Internet Explorer 8 (down to 6)<\/td>\nDoesn’t Work<\/td>\nSolid Color<\/td>\n<\/tr>\n
Internet Explorer 5.5 (and down)<\/td>\nDoesn’t Work<\/td>\nNo Color<\/td>\n<\/tr>\n
Netscape (any version)<\/td>\nDoesn’t Work<\/td>\nSolid Color<\/td>\n<\/tr>\n
BlackBerry Storm Browser<\/td>\nWorks<\/td>\n — <\/td>\n<\/tr>\n<\/table>\n
Data gathered from this demo<\/a>, which includes more complete browser compatibility list.<\/p>\n
A better fallback for IE<\/h3>\n
Since IE supports conditional stylesheets<\/a>, we can bust out those and a proprietary Microsoft CSS filter to accomplish the same result:<\/p>\n
<!--[if IE]>\r\n   \r\n   <style type=\"text\/css\">\r\n\r\n   .color-block { \r\n       background:transparent;\r\n       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); \r\n       zoom: 1;\r\n    } \r\n\r\n    <\/style>\r\n\r\n<![endif]--><\/code><\/pre>\n
UPDATE:<\/strong> 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)<\/p>\n
ANOTHER UPDATE:<\/strong> 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:<\/p>\n
rgba(255, 255, 255, 0.5) wouldn’t be equivalent to (startColorstr=#50FFFFFF,endColorstr=#50FFFFFF)
\nrgba(255, 255, 255, 0.5) would be equivalent to (startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)<\/p>\n
00 is transparent and FF opaque. Here’s the full mapping:<\/p>\n
100% \u2014 FF
\n95% \u2014 F2
\n90% \u2014 E6
\n85% \u2014 D9
\n80% \u2014 CC
\n75% \u2014 BF
\n70% \u2014 B3
\n65% \u2014 A6
\n60% \u2014 99
\n55% \u2014 8C
\n50% \u2014 80
\n45% \u2014 73
\n40% \u2014 66
\n35% \u2014 59
\n30% \u2014 4D
\n25% \u2014 40
\n20% \u2014 33
\n15% \u2014 26
\n10% \u2014 1A
\n5% \u2014 0D
\n0% \u2014 00<\/p>\n
More Information<\/h3>\n