rgba()

artyspangler's avatar
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

Contribute to Docs

Learn CSS on Codecademy