Opacity Property in CSS

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.

Written by Michael Gearon

Michael Gearon is a UX Designer at BrandContent. Specialising in voice assistants and CRO, I have a wealth of experience in UX, UI and website design. Based in Cardiff, South Wales Mike can help local businesses with their online presence.