RGBa vs Opacity: The Difference Explained

To be able to effectively handle the alpha transparency or opacity of a particular element purely using CSS/HTML was the dream of any web designer. Because, with alpha transparency or opacity they can make visually more beautiful and easily maintainable websites with less effort. Now with CSS3 we can achieve these using properties such as RGBa and Opacity.

What is RGBa?

In addition to RGB (Red Blue Green) CSS3 has introduced a new feature to color setting, which is called RGBA. RGBA stands for Red Blue Green Alpha. Here “A” in this property name stands for “Alpha”. This additional feature can be used to specify an opacity value for any color. The alpha channel is usually used as an opacity channel. If a pixel has 0% value in its alpha channel, it’s fully transparent (and, thus, invisible), whereas a value of 100% in the alpha channel gives a fully opaque pixel. We can use this for anything that can take the CSS color property.


Sample CSS Code:

1

P { background-color: rgba(255, 0, 0, 0.5); }

We can use RGBA now on all new-generation browsers including Firefox 3, Chrome, Safari, and Opera 10, but we won’t see the effect in Internet Explorer.

Live Preview (Screenshot for older browsers)

Sample CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.round1, .round2, .round3 { 
-moz-border-radius: 80px; -webkit-border-radius: 80px; 
width: 154px; height: 154px; position:relative;
}
.round1 { 
background-color: rgba(255,0,0,.5); 
border: 3px solid #ff0000; 
}
.round2 { 
background-color: rgba(0,255,0,.5); left: 80px; 
top: -160px; border: 3px solid #00ff00; 
}
.round3 { 
background-color: rgba(0,0,255,.5); left:40px; 
top: -250px; text-align: center; 
color:#FFFFFF; font: bold 26px Arial, Helvetica, sans-serif; 
border: 3px solid #0000ff;
}
.round1:hover, .round2:hover, .round3:hover {
border: 3px solid #ffff00;
}

Sample HTML Code

1
2
3

<div class="round1"> </div>
<div class="round2"> </div>
<div class="round3">HAI</div>

What is Opacity?

The opacity is also a CSS3 property that allows us to directly set the transparency level of a particular element through CSS. The amount of transparency can vary between 0 (fully opaque) and 1 (fully transparent). For eg, in order to achieve 50% transparency for a particular element, we need to set the opacity value as 0.5.

CSS Code

1

P { background-color: #7cb01e; opacity: 0.5; }

Live Preview (Screenshot for older browsers)

Sample CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13

.boxA { background-color: rgb(84, 107, 1); opacity: 0.1; }
.boxB { background-color: rgb(84, 107, 1); opacity: 0.2; }
.boxC { background-color: rgb(84, 107, 1); opacity: 0.3; }
.boxD { background-color: rgb(84, 107, 1); opacity: 0.4; }
.boxE { background-color: rgb(84, 107, 1); opacity: 0.5; }
.boxF { background-color: rgb(84, 107, 1); opacity: 0.6; }
.boxG { background-color: rgb(84, 107, 1); opacity: 0.7; }
.boxH { background-color: rgb(84, 107, 1); opacity: 0.8; }
.boxI { background-color: rgb(84, 107, 1); opacity: 0.9; }
.boxA:hover, .boxB:hover, .boxC:hover, .boxD:hover, .boxE:hover, 
.boxF:hover, .boxG:hover, .boxH:hover, .boxI:hover { 
opacity: 1.0; color:#FFFFFF; 
}

Sample HTML Code

1
2
3
4
5
6
7
8
9

<div class="boxA">www.deepubalan.com</div>
<div class="boxB">www.deepubalan.com</div>
<div class="boxC">www.deepubalan.com</div>
<div class="boxD">www.deepubalan.com</div>
<div class="boxE">www.deepubalan.com</div>
<div class="boxF">www.deepubalan.com</div>
<div class="boxG">www.deepubalan.com</div>
<div class="boxH">www.deepubalan.com</div>
<div class="boxI">www.deepubalan.com</div>

Difference between RGBA and Opacity

Even though both RGBa and Opacity properties are used to control the transparency of an element, they are basically not the same thing. So what are the differences here?

When we apply an opacity value to an element, the opacity value is inherited by all its child elements. Suppose if we apply opacity value to a DIV (div { opacity: 0.5; } ), the text, images and all other elements inside that particular DIV will inherit the opacity value and they will become transparent in-turn.

On the other hand RGBa sets the opacity of the color value of that particular element and the transparency is not inherited by its child elements. In other words, RGBA sets the opacity value only for a single declaration.

Live Preview (Screenshot for older browsers)


While we compare the above RGBa and Opacity examples, It is very clear that by setting the opacity property, the element and all its contents including images and texts become transparent. On the other hand the RGBa applies the transparency only to the color value and not to the entire element and it’s contents. Hence all the texts and images are fully visible here and only the background color become transparent.

Browser compatibility

So now the question is about browser support. How to handle the lack of support of Internet Explorer or other older version browsers? The answer is to make use of conditional statements to supply solid colours or an alpha transparent PNG image. We can also make use of Rafael Lima’s CSS Browser Selector, 1 kb javascript solution that will help us to send browser specific CSS rules.

Conclusion

If you are ready to enhance the user experience of new generation browsers, and also by respecting the older versions, through providing functional and solid fallbacks. Convince your clients now and start exploring the whole new possibilities of features like RGBA and Opacity.