Michael Gearon

Opacity Property in CSS

Michael Gearon

Last updated on

CSS3 Pseudo Element

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 <div> 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.

See the Pen zqrGZQ by Michael Gearon (@michaelgearon) on CodePen.

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

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.