rgba() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS rgba() function is used to define colors using the Red, Green, Blue, and Alpha (RGBA) model. RGBA color values are an extension of RGB color values, which include an alpha channel to indicate color transparency.

The rgba() function takes four parameters:

Red: The intensity of the red color, specified as an integer value between 0 and 255, or as a percentage value between 0% and 100%.
Green: The intensity of the green color, specified as an integer value between 0 and 255, or as a percentage value between 0% and 100%.
Blue: The intensity of the blue color, specified as an integer value between 0 and 255, or as a percentage value between 0% and 100%.
Alpha: The opacity of the color, specified as a decimal value between 0.0 (completely transparent) and 1.0 (completely opaque).

For example, the following rgba() value defines a red color with 50% opacity:

rgba(255, 0, 0, 0.5)

The rgba() function can be used to create a wide variety of visual effects, such as:

Transparent backgrounds: To create a transparent background for an element, simply set its background-color property to an rgba() value with a low alpha value.
Translucent elements: To create a translucent element, set its opacity property to an rgba() value with a low alpha value.
Faded images: To fade an image, set its opacity property to an rgba() value with a low alpha value.
Hover effects: To create a hover effect that changes the opacity of an element, use the :hover pseudo-class to set the element's opacity property to an rgba() value with a different alpha value.

Here is an example of how to use the rgba() function to create a transparent background for an element:

.container {
  background-color: rgba(0, 0, 0, 0.5);
}

This will create a container element with a 50% transparent black background.

Syntax

rgba() = rgba( <red>, <green>, <blue>, <alpha> )

Values

<red>This value can be either a <number> or <percentage> where the number 255 corresponds to 100%
<green>This value can be either a <number> or <percentage> where the number 255 corresponds to 100%
<blue>This value can be either a <number> or <percentage> where the number 255 corresponds to 100%
<alpha>Determines how transparent the color is. A value of 1 is fully opaque, while a value of 0 is fully transparent. A value of 0.5 is semi-transparent.

Example

HTML

<div class="rgba">This is an example of the rgba() function.</div>

CSS

body {

   background: url("images/tick.png");

}

.rgba {

   background-color: rgba(134, 134, 134, 0.5);

   color: white;

   border: 2px solid red;

   margin: 20px;

   padding: 20px;

   text-align: center;

}

Result

Editor