Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Define colors using the Red-Green-Blue-Alpha model (RGBA) with CSS
CSS provides the RGBA color model to define colors using Red, Green, Blue values along with an Alpha channel for transparency. The rgba() function allows you to specify colors with precise opacity control, making it ideal for creating semi-transparent elements and layered designs.
Syntax
selector {
color: rgba(red, green, blue, alpha);
background-color: rgba(red, green, blue, alpha);
}
Possible Values
| Parameter | Range | Description |
|---|---|---|
red |
0-255 | Red color intensity |
green |
0-255 | Green color intensity |
blue |
0-255 | Blue color intensity |
alpha |
0-1 | Opacity level (0 = transparent, 1 = opaque) |
Example: RGBA Colors with Transparency
The following example demonstrates different RGBA colors with varying opacity levels −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
padding: 20px;
background-color: #f0f0f0;
}
.red-box {
background-color: rgba(255, 0, 0, 0.8);
color: white;
padding: 15px;
margin: 10px 0;
}
.blue-box {
background-color: rgba(0, 0, 255, 0.5);
color: white;
padding: 15px;
margin: 10px 0;
}
.green-box {
background-color: rgba(0, 255, 0, 0.3);
color: black;
padding: 15px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="red-box">Red with 80% opacity</div>
<div class="blue-box">Blue with 50% opacity</div>
<div class="green-box">Green with 30% opacity</div>
</div>
</body>
</html>
Three colored boxes appear with different transparency levels: a semi-transparent red box (80% opacity), a more transparent blue box (50% opacity), and a very transparent green box (30% opacity) over a light gray background.
Example: Comparison with RGB
This example shows the difference between rgb() and rgba() functions −
<!DOCTYPE html>
<html>
<head>
<style>
.comparison {
display: flex;
gap: 20px;
padding: 20px;
}
.rgb-color {
background-color: rgb(255, 165, 0);
padding: 20px;
color: white;
text-align: center;
}
.rgba-color {
background-color: rgba(255, 165, 0, 0.6);
padding: 20px;
color: black;
text-align: center;
}
</style>
</head>
<body>
<div class="comparison">
<div class="rgb-color">RGB Orange<br>rgb(255, 165, 0)</div>
<div class="rgba-color">RGBA Orange<br>rgba(255, 165, 0, 0.6)</div>
</div>
</body>
</html>
Two orange boxes side by side: the left box shows solid orange color using rgb(), while the right box shows the same orange color with 60% opacity using rgba(), making it semi-transparent.
Conclusion
The RGBA color model extends RGB by adding alpha transparency control. Use rgba() when you need semi-transparent elements, layered designs, or subtle color overlays in your CSS styling.
Updated on: 2026-03-15T13:19:07+05:30
252 Views
Advertisements