CSS opacity Property


The CSS opacity property allows you to specify the degree of opacity using a number between 0 and 1.Values outside this are set to their nearest number(0 or 1)

The opacity property is applicable to the element as well as it descendent, even though the value is not inherited by child elements.

The opacity property is used to set the level of transparency of an element. Opacity is the opposite of transparency.

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below).

CSS Syntax

opacity: number|initial|inherit;

Supported Browsers: The browser supported by property are listed below:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example -