Opacity Property in CSS
Last updated on
The CSS opacity property controls how transparent an element is. The values can be between 0 (not visible) and 1 (completely visible). The initial value is 1, it is also worth noting that if you apply transparency to the parent that all the child elements will be effected too.
Support for this property is extremely good looking at caniuse.com. The property is supported back to IE9 and with partial support in IE8 so there is no reason why you can’t use it now. In order to support IE8 and older you will need to use proprietary ‘filter’ property.
CSS
div{
opacity: 0.5;
}The above example will set the transparency of the
to 50% opaque. By default all elements are set to the value of 1 which is solid. If you wanted the element to be fully transparant then your value would be 0 (or 0.0) which would then be 100% transparent. If you need to support Internet Explorer (IE) 8 then you can use this code:
div{
filter: alpha(opacity: 0.5);
}Example of Opacity Levels
Not sure why but I did include 0% opacity too just to prove that it is invisible.
[codepen_embed height=”600″ theme_id=”light” default_tab=”css,result” slug_hash=”zqrGZQ” user=”michaelgearon”]See the Pen
by Michael Gearon (@michaelgearon)
on CodePen.[/codepen_embed]
RGBA
One of the downsides of using the opacity property is that it’ll make the child elements more opaque. To solve this issue you could set the background colour using the RGBA colour value instead.
RGB stands for red, green and blue, the A is the alpha value which sets the transparency of that colour. This will avoid your child elements being impacted by.
More Guides
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects