Open In App
Related Articles

CSS rgba() Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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">GeeksforGeeks</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


Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads