rgba()

Published Jul 21, 2021Updated Oct 30, 2023
Contribute to Docs

The rgba() color function defines the color value by providing three comma separated values along with an optional fourth value.

  • The first value represents the red value.
  • The second represents the green value.
  • The third represents the blue value.
  • The optional fourth value represents the alpha value, the transparency of a color.

Syntax

<property>: rbg(red, green, blue, alpha);

where red, green, blue can be one of the following:

  • Number values: ranging between 0 and 255
  • Percentage values: ranging between 0% and 100%

where alpha is a numeric value between 0 and 1. A 1 value will make the color fully opaque, while a 0 value will make the color fully transparent.

Example 1

Set the transparency of h1 element’s color to be .5:

h1 {
color: rgba(0, 0, 0, 0.5);
}

Example 2

Set the transparency of h2 element’s color to be 25% opaque:

h2 {
color: rgba(0, 0, 0, 25%);
}

The h1 and h2 elements will render similar to:

CSS color examples

All contributors

Looking to contribute?

Learn CSS on Codecademy