Michael Gearon

Opacity Property in CSS

Michael Gearon

Last updated on

Opacity can be set in CSS using values such as 1.0 which is 100% opacity or 0.5 which is 50% opacity

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.


 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:

 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]


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

Senior Interaction Designer and Co-Author to Tiny CSS Projects