The rgba function creates a color using red, blue, green, and alpha values.
The alpha value specifies the color's opacity or transparency.
This function can be used by any property that requires a color value.
An element with an rgba background-color. It has 30% opacity.
<style>
.rgba {
padding: 25px;
background-color: rgba(220, 20, 60, 30%);
}
</style>
<div class="rgba">An rgba background color</div>
The rgba function defines a color with red, green, blue, and alpha values.
The color intensity ranges from 0 to 255 or 0% to 100%.
The alpha value specifies color opacity from 0 to 1 or 0% to 100%.
rgba(red, blue, green, alpha);
| Value | Description |
|---|---|
red |
Red color intensity, from 0 to 255 or 0% to 100%. |
blue |
Blue color intensity, from 0 to 255 or 0% to 100%. |
green |
Green color intensity, from 0 to 255 or 0% to 100%. |
alpha |
Color opacity or transparency, from 0 to 1 or 0% to 100%. |
This table shows when rgba support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
3.5 | Nov 1998 |
 Safari
|
1.0 | Jun 2003 |
