CSS3

• Home / CSS3 Previews / Opacity

Opacity

The most widely implemented feature of CSS3 up till now is opacity. It’s probably also the one people have been waiting for the most…

See the example:

See the difference in the code between the first row, which uses the same color value for each row, combined with an opacity value, and the second, which uses RGB values:

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>

And the second one:

<div style=" background: rgb(243, 191, 189) ; "></div>
<div style=" background: rgb(246, 143, 142) ; "></div>
<div style=" background: rgb(249, 95 , 94)  ; "></div>
<div style=" background: rgb(252, 47, 47)   ; "></div>
<div style=" background: rgb(255, 0, 0)     ; "></div>

The exact same effect shown here can be reached using rgba values.

For more info:

• A brief introduction to opacity and RGBA
• On Opacity and complexity