rgba() CSS Function

Description

The rgba() CSS 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.

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

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

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;

}

Browser Support

Desktop
9	12	1	3	10	3.1
Tablets / Mobile
≤37	18	4	Yes	2	Yes