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 is an alias for the rgb() function. It accepts an RGB value as well as an optional alpha channel.

Something like this:

The RGBA value is provided as a list of four values, which represent the red, green, blue, and alpha channels respectively. The list for the RGB portion can be space separated (modern syntax), or comma-separated (legacy syntax). When using the space-separated syntax, the RGB and alpha channel portions are separated by a forward slash (/).

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).

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