rgba() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The rgba() CSS function is used to define colors with an explicit level of transparency, combining the red, green, and blue color channels with an alpha channel that controls opacity. The red, green, and blue components accept numeric values from 0 to 255, while the alpha value ranges from 0 (fully transparent) to 1 (fully opaque). This makes rgba() particularly useful when you want to overlay elements or create semi-transparent backgrounds without affecting other content.

Using rgba() allows for greater flexibility than the rgb() function, which does not include transparency. It is commonly applied in background-color or color properties, but it can also be used wherever a color value is accepted, such as borders, shadows, or gradients.

For example, you can create a semi-transparent background for a div like this:

div {
  background-color: rgba(255, 0, 0, 0.5); /* Red at 50% opacity */
}

This results in a red overlay that lets underlying content partially show through. Another common use is to apply subtle transparency to text colors:

p {
  color: rgba(0, 0, 0, 0.7); /* Dark gray with 70% opacity */
}

The rgba() function is especially powerful when combined with CSS layouts that use layering or overlapping elements, enabling effects that would be difficult to achieve with solid colors alone.

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="container">

  <div class="box box-full">Opaque (1.0)</div>

  <div class="box box-medium">See-through (0.5)</div>

  <div class="box box-low">Ghostly (0.1)</div>

</div>

CSS

/* The container has a background so you can see the boxes are see-through */

.container {

  padding: 20px;

  background-color: #eee;

  display: flex;

  gap: 10px;

}



.box {

  width: 150px;

  height: 150px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-weight: bold;

  border: 2px solid #333;

}



/* RGBA Examples */



.box-full {

  /* Solid Blue */

  background-color: rgba(0, 122, 255, 1.0); 

}



.box-medium {

  /* 50% Transparent Blue */

  background-color: rgba(0, 122, 255, 0.5); 

}



.box-low {

  /* 10% Transparent Blue */

  background-color: rgba(0, 122, 255, 0.1); 

  color: #333; /* Darker text for readability */

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS rgba() function. Hover over a browser icon to see the version that first introduced support for this CSS function.