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 |
Last updated by CSSPortal on: 1st December 2019