CSS rgba() Function

Example

Define different RGB colors with opacity (RGBA):

#p1 {background-color:rgba(255,0,0,0.3);} /* red with opacity*/
#p2 {background-color:rgba(0,255,0,0.3);} /* green with opacity */
#p3 {background-color:rgba(0,0,255,0.3);} /* blue with opacity */

Try it Yourself »

Definition and Usage

The rgba() function define colors using the Red-green-blue-alpha (RGBA) model.

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color.

Version:	CSS3

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Function
rgba()	1.0	9.0	3.0	3.1	10.0

CSS Syntax

rgba(red, green, blue, alpha)

Value	Description
red	Defines the intensity of red as an integer between 0 and 255, or as a percentage value between 0% and 100%
green	Defines the intensity of green as an integer between 0 and 255, or as a percentage value between 0% and 100%
blue	Defines the intensity of blue as an integer between 0 and 255, or as a percentage value between 0% and 100%
alpha	Defines the opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque)

❮ CSS Functions Reference