CSS rgba() Function
Example
Use RGBA colors and transparency:
#p1 {background-color:rgba(255,0,0,0.3);} /*red*/
#p2 {background-color:rgba(0,255,0,0.3);} /*green*/
#p3 {background-color:rgba(0,0,255,0.3);} /*Blue*/
Try it Yourself »
Definition and usage
The rgba() function uses the red (R), green (G), blue (B), and alpha (A) components to generate a variety of colors.
RGBA stands for red, green, blue, and transparency (English: Red, Green, Blue, Alpha).
- Red (R)An integer between 0 and 255, representing the red component of the color.
- Green (G)An integer between 0 and 255, representing the green component of the color.
- Blue (B)An integer between 0 and 255, representing the blue component of the color.
- Transparency (A)A value between 0 and 1, representing the transparency (alpha).
Supported versions: CSS3
Browser Support
The numbers in the table indicate the first browser version that supports the function.
| Function | |||||
|---|---|---|---|---|---|
| rgba() | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS Syntax
rgba(red, green, blue, alpha)
| Value | Description |
|---|---|
| red | Defines the red value, ranging from 0 to 255, or as a percentage from 0% to 100%. |
| green | Defines the green value, ranging from 0 to 255, or as a percentage from 0% to 100%. |
| blue | Defines the blue value, ranging from 0 to 255, or as a percentage from 0% to 100%. |
| alpha - transparency | Defines the transparency (alpha) from 0 (fully transparent) to 1 (fully opaque). |
other extensions