## CSS rgba() Function
### Definition and Usage
The `rgba()` function defines a color using the Red-Green-Blue-Alpha (RGBA) model. It is an extension of the RGB color model with an alpha channel, which specifies the opacity of the color.
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
**Note:** When an alpha channel is specified, the color is not transparent even if the alpha value is 0.
### Browser Support
The numbers in the table indicate the first browser version that fully supports the function.
| Function | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `rgba()` | 1.0 | 12.0 | 1.0 | 3.1 | 10.0 |
### CSS Syntax
```css
rgba(red, green, blue, alpha)
**Parameter Values:**
| Value | Description |
| :--- | :--- |
| *red* | Defines the red component. A value between 0 and 255, or a percentage (0% to 100%). |
| *green* | Defines the green component. A value between 0 and 255, or a percentage (0% to 100%). |
| *blue* | Defines the blue component. A value between 0 and 255, or a percentage (0% to 100%). |
| *alpha* | Optional. Defines the opacity. A value between 0.0 (fully transparent) and 1.0 (fully opaque). Default is 1.0. |
### Examples
#### Example 1
Set the background color of a `
` element to a semi-transparent red:
div {
background-color: rgba(255, 0, 0, 0.3);
border: 1px solid black;
}
The rgba() Function
This is a div element with a semi-transparent red background.
#### Example 2
Compare `rgb()` and `rgba()`:
#opa1 {
background-color: rgb(255, 0, 0);
border: 1px solid black;
}
#opa2 {
background-color: rgba(255, 0, 0, 0.3);
border: 1px solid black;
}
The rgba() Function
Opaque red background (rgb):
This is a div element.
Semi-transparent red background (rgba):
This is a div element.
YouTip