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
and255
- Percentage values: ranging between
0%
and100%
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:
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.