CSS: Opacity

By Xah Lee. Date: . Last updated: .

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

0.0 0.1 0.2
0.3 0.4 0.5
0.6 0.7 0.8
0.9 1.0

RGB Syntax

rgba(red, green, blue, opacity)

0 ≤ opacity ≤ 1

The 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) }

HSL Syntax

hsla(hue, saturation, lightness, opacity)

0 ≤ opacity ≤ 1

hue should be from 0 to 360.

saturation, lightness must be from 0% to 100%.

Example:

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

[see CSS: HSL Color]

This is supported in all browsers as of 2012-04-20.

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc