CSS: Opacity

By Xah Lee. Date: 2012-04-20. Last updated: 2024-06-08.

CSS colors can specify a transparency level, called opacity. the higher the opacity, the more opaque.

Example: Opacity

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

rgba(red, green, blue, opacity)

opacity should be from 0 to 1.
red, green, blue each can either be a integer from 0 to 255, or a percentage from 0% to 100%.

Example:

p.x { color: rgb(255, 192, 203, 0.5) }

p.y { color: rgb(100%, 75%, 79%, 0.5) }

hsla(hue, saturation, lightness, opacity)

Example:

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

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