CSS: Opacity (Transparency)

By Xah Lee. Date: . Last updated: .

Opacity property

The Opacity property is to specify degree of transparency in a element. For the whole element.

if you just want opacity in color, use

Opacity Syntax

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

Decimal number syntax

div {
 opacity: 0.9;
}

Percent syntax

div {
 opacity: 90%;
}

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