CSS rgba() Function
The rgba() function is an inbuilt function in CSS that is used to define the colors using the Red-Green-Blue-Alpha (RGBA) model. It is an extension of rgb() color values containing an alpha channel that specifies the transparency of color.
Syntax:
rgba( red, green, blue, alpha )
Parameters: This function accepts 4 parameters as described below:
- red: This parameter is used to define the intensity of the red color. It is an integer value that lies between 0 to 255, or as a percentage value between 0% to 100%.
- green: This parameter is used to define the intensity of the green color. It is an integer value that lies between 0 to 255, or as a percentage value between 0% to 100%.
- blue: This parameter is used to define the intensity of the blue color. It is an integer value that lies between 0 to 255, or as a percentage value between 0% to 100%.
- alpha: This parameter is used to define the opacity and the value lies between 0.0 (completely transparent) to 1.0 (completely opaque).
Example: This example illustrates the rgba() function where different color intensities (ie., red, blue & green), are displayed with the specific value for each color, along with the alpha value for setting the opacity of the color.
HTML
<!DOCTYPE html> < html > < head > < title >rgba function</ title > < style > .gfg1 { background-color: rgba(1, 153, 0, 0.5); text-align: center; } .gfg2 { background-color: rgba(0, 255, 0, 0.5); text-align: center } .gfg3 { background-color: rgba(133, 150, 150, 0.5); text-align: center } .gfg { font-size: 40px; font-weight: bold; color: green; text-align: center; } h1 { text-align: center; } </ style > </ head > < body > < div class = "gfg" >w3wiki</ div > < h1 >The rgba() Function</ h1 > < p class = "gfg1" >Green</ p > < p class = "gfg2" >Light green</ p > < p class = "gfg3" >Light black</ p > </ body > </ html > |
Output:
Supported Browsers: The browser supported by rgba() function are listed below:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Contact Us