CSS 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.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours