CSS 3 Opacity

Example

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;opacity:1.0;

This paragraph has opacity 0.8.
background-color:#30f;color:#fff;width:100%;opacity:0.8;

This paragraph has opacity 0.5.
background-color:#30f;color:#fff;width:100%;opacity:0.5;

This paragraph has opacity 0.2.
background-color:#30f;color:#fff;width:100%;opacity:0.2;

Return to Opacity Article

Get Opacity to Work in Internet Explorer

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=100);

This paragraph has opacity 0.8.
background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=80);

This paragraph has opacity 0.5.
background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=50);

This paragraph has opacity 0.2.
background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=20);

Return to Opacity Article

Some Older Versions of Mozilla Browsers Need a Little Help Too

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;-moz-opacity:1.0;;

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;-moz-opacity:0.8;

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;-moz-opacity:0.5;

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;-moz-opacity:0.2;

Return to Opacity Article

Playing with Image Opacity

The original image:

50% Transparent

Mouse over this image:

Return to Opacity Article

Images with Text Above

This is my dog Shasta. Isn't he cute!

Return to Opacity Article

Discuss in my forum