CSS: Opacity

By Xah Lee. Date: . Last updated: .

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:

/* rgb color by integer, 0 to 255 */
p { color: rgb(255, 192, 203, 0.5) }
/* rgb color by percentage */
p { 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 .

Example

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

CSS Color

  1. CSS Color Syntax
  2. CSS Color Names
  3. CSS: HSL Color
  4. CSS: Opacity
  5. CSS: Linear Gradient
  6. CSS: Radial Gradient
Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog