Michael Gearon

Opacity Property in CSS

Michael Gearon

Last updated on

CSS3

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 the opacity property is extremely good, being 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; /*This sets the div to be 50% transparent*/
}

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.

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.