rgba()

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);

to clipboard
Copy to clipboard

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

to clipboard
Copy to clipboard

Example 2

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

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

to clipboard
Copy to clipboard

The h1 and h2 elements will render similar to: