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 Topic

  1. CSS Color Syntax
  2. CSS Color Names
  3. CSS: HSL Color
  4. CSS: Opacity
  5. CSS: Linear Gradient
  6. CSS: Radial Gradient
Liket it? 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 Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc