CSS: Opacity

By Xah Lee. Date: . Last updated: .

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

RGB Syntax

rgba(red, green, blue, opacity)

Example:

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

HSL Syntax

hsla(hue, saturation, lightness, opacity)

Example:

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

[see CSS: HSL Color]

Browser Support

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

CSS

Basics

Selectors

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc