CSS rgba() Function

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.

Example

#

An element with an rgba background-color. It has 30% opacity.

An rgba background color
<style>
  .rgba {
    padding: 25px;
    background-color: rgba(220, 20, 60, 30%);
  }
</style>

<div class="rgba">An rgba background color</div>

Using rgba

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%.

Syntax

rgba(red, blue, green, alpha);

Values

#

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%.

Browser support

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

You may also like

Guides