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
Explorer Edge Chrome Firefox Opera Safari
91213103.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37184Yes2Yes

Last updated by CSSPortal on: 1st December 2019