CSS3 Opacity

A brief introduction to Opacity and RGBA

The Opacity declaration sets how opaque an element is. An opacity value of 1 means the element is fully opaque; an opacity value of 0 means an element is not at all opaque, i.e. fully transparent.

div { background-color: rgb(255,0,0); opacity: 1; }

Webkit, Gecko and Opera browsers all support Opacity.

The RGBA declaration allows you to set opacity (via the Alpha channel) as part of the color value.

div { background-color: rgba(255,0,0,1); }

This is supported in Webkit and the first alpha of Firefox 3.

The key difference between the two declarations is this:

Opacity sets the opacity value for an element and all of its children;
RGBA sets the opacity value only for a single declaration.

Here’s an code example from this sites CSS:

#center-box {
    background-color:rgba(240,240,240,0.6) !important;
/*--For Internet Explorer 6, 7, 8 and older--*/ background-color:#F8F8F8; }

browser window corner

The white center-box on this site, that contains the menu and text is opaque. If you can't see it try moving the browser window corner.


This page is optimized for firefox and google Chrome.
It will not work with old versions of Internet explorer.
Internet explorer 6, 7 and 8 doesn't support Processing.js,
border-radius and many other
things that should be visible on the Internet.
Internet explorer 9 is only available for vista and windows 7.