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

HTML

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

CSS

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;

}

Result

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

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu