CSS rgba() Function

The CSS rgba() function can be used to provide a color value with alpha transparency when using CSS. It allows you to specify an RGB color value, as well as an alpha value to determine the color's transparency.

The rgba() function works just like the rgb() function (in that it accepts the RGB value as a parameter), except rgba() accepts a fourth value — the alpha channel.

Like this:

The RGBA value is provided as a comma-separated list of four values, which represent the red, green, blue, and alpha channels respectively.

Each of the RGB values can be provided as either an integer or as a percentage. The integer value 255 corresponds with a percentage value of 100%.

However, on the alpha channel, the value should be in the range 0.0 (fully transparent) to 1.0 (fully opaque).

Web Page Example

Here's a working example of using the rgba() function to define colors for a web page.

You can see that the article element is partially transparent (its alpha value is 0.5).

Tweak the above alpha values to see the effect it has on each element's transparency.

Examples of Alpha Variations

Here's an example of the same color repeated multiple times (across a background image), but each one with a different alpha value.

All other values are the same (i.e. the red, green, blue are the same across all rows), only the alpha channel changes.

This demonstrates that the background image becomes less visible as the alpha value increases (the stars are the background image).

Blue