CSS Reference Function

rgba()

The rgba() functional notation is used to set colors as a combination of red, green, blue and an alpha value for transparency.

The color function is a variation of the rgb() function. In addition to the three color values it accepts, it also accepts a fourth value: an alpha value, or the opacity, which is expressed as a decimal number between 0 and 1. For example, if you want to set a semi-transparent red color, you could write: rgba(100%, 0, 0, 0.5), where the last value 0.5 sets the transparency of the color to half its value. An alpha value of 1 means the color is fully opaque, and the value 0 means the color is fully transparent.

The following example will create a semi-transparent purple background color on an element, with white text.

.some-class {
  color: rgba(255, 255, 255, 1); /* fully-opaque white text color */
  background-color: rgba(255, 0, 255, 0.5); /* semi-transparent background color */
}
        

The following is a live demo showing how the color changes when its opacity is changed by changing the alpha value in the function.

View this demo on the Codrops Playground

Browser Support

The hsl(), hsla(), rgba(), transparent, and currentColor keywords are supported in all major browsers and in Internet Explorer starting from version 9.

Written by

Last updated February 4, 2015 at 4:45 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.