CSS opacity

The opacity property is used to specify the level of transparency of an element.

CSS

opacity: value;

This property takes values from 0 to 1 (both inclusive), where a value of 0 makes the element fully transparent and a value of 1 makes it fully opaque. Rest all the values between these two make it semi-transparent. As the value goes from 0 to 1, the transparency level decreases. The default opacity of any element is 1.

When transparency is added to an element using the opacity property, all its child elements by default inherit the same transparency. This means that an element with an opacity value of 0.2 will have all its children with the same opacity. If you do not want the child elements to inherit opacity, give opacity using RGBA color values which are discussed later.

Values

<number> : Specifies the opacity. The number can be between 0 (fully transparent) and 1 (fully opaque), both inclusive. The default value is 1.

initial : Sets the default value of the property.

inherit : The element inherits value from its parent element.

Examples

In the following demo, three div elements are given different opacity values making the background and the content of each of them of same opacity.

IE 8 and earlier versions support an alternate non-standard filter property. This property is given value of the form alpha(opacity=20), where 20 is the percentage value of opacity (opacity = 0.2). This is true for any value.

The code for giving an opacity value of 0.5 to a div is shown below, where opacity2 is the id of the div.

CSS

#opacity2 {
  opacity: 0.5;
  filter: alpha(opacity=50); /* IE8 and previous versions */
}

See the Pen CSS opacity example by Aakhya Singh (@aakhya) on CodePen.

In the next example, two div elements are stacked, with one element vertically above another using the z-index (for changing their z-index) and the position (for overlapping them) property. The bottom element is given a background image and the top element is given a blue background. Also, the top element is given an opacity value of 0.7 which makes it semi-transparent.

In the following code, layer1 and layer2 are the ids of the bottom and top elements respectively.

CSS

#layer1 {
  background: url('dog.jpg') top left / contain;
}

#layer2 {
  background-color: blue;
  position: relative;
  top: -70px;
  left: 40px;
  z-index: 2;
  opacity: 0.7;
  filter: alpha(opacity=70); /* IE8 and previous versions */
}

See the Pen CSS opacity example by Aakhya Singh (@aakhya) on CodePen.

Changing opacity of background color using RGBA color values

In the first example, you can notice the opacity of the content also changing with the opacity of the container. Moreover, as stated earlier, if an element is given some opacity using the opacity property, then its child elements also inherit it by default. To prevent changing of the opacity of the content or the children of an element, you can use the RGBA color values to change the opacity of the background color.

The first example is demonstrated again using RGBA color values instead of the opacity value. In RGBA color values, R, G, B and A represents red color, green color, blue color and opacity value (from 0 to 1) respectively.

CSS

#opacity2 {
  background: rgba(30, 144, 255, 0.5);
}

See the Pen Tansparency with RGBA color values by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported in all modern browsers. IE 8 and earlier versions support an alternate non-standard filter property.