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 defines colors using the Red-green-blue-alpha (RGBA) model.

RGBA color values are an extension of RGB color values, with an alpha channel that specifies the color opacity.

Version: CSS3

Browser support

The numbers in the table indicate the first browser version that fully supports this feature.

Function
rgba() 1.0 9.0 3.0 3.1 10.0

CSS syntax

rgba(red, green, blue, alpha)
Value Description
red The red intensity is defined as an integer between 0 and 255, or a percentage value between 0% and 100%.
green The green intensity is defined as an integer between 0 and 255, or a percentage value between 0% and 100%.
blue The blue intensity is defined as an integer between 0 and 255, or a percentage value between 0% and 100%.
alpha Define opacity as a number between 0.0 (completely transparent) and 1.0 (completely opaque).