CSS: Opacity (Transparency)

By Xah Lee. Date: . Last updated: .

Opacity Syntax

Value is 0 to 1. The higher the opacity value, the more opaque.

Can be both a decimal number, or percent. 

div {
 opacity: 0.9;
}
div {
 opacity: 90%;
}

Opacity with RGB Syntax

div {
 color: rgb(100%, 75%, 79%, 0.5);
}

Opacity with HSL Syntax

div {
 background-color: hsla(120, 100%, 50%, 0.3);
}

Opacity Example

Here is text on top of a image. The text's background has increasingly higher opacity.

0.0 0.2 0.4 0.6 0.8 1.0

Browser Support

Supported in all browsers as of 2012-04-20.

CSS Color