The opacity property is used to control the level of transparency of an element. Using this property, you can set an element to be fully transparent, fully opaque (default), or translucent. 44w46

It takes a <number> value that specifies the degree of transparency of the element. The number ranges anywhere between 0 and 1. A value of 1 is the default value, and makes the element fully opaque. A value of 0 makes the element fully transparent so you can’t see it anymore. A value between 0 and 1 makes it translucent (or semi-transparent).

The lower the value goes from 1 to 0 the more transparent the element becomes, and the more you can see any backgrounds or elements that are behind/below it.

The opacity property applies the specified opacity to the element as a whole, including its contents, rather than applying it to each descendant individually. This means that, even if the opacity property does not cascade (is not inherited by default), the descendants of an element will get the same opacity as their parent element anyway. There is no way to force a descendant of the element to becomes less transparent than its parent.

The opacity property has the same effect as the visibility property in that it can make the element fully transparent (invisible) without affecting layout—the transparent element still takes up a space on the layout as if it were visible.

If opacity has a value less than 1, the element forms a z-index property entry for details and an explanation.

The opacity property can be used to create fade-in/fade-out effects with CSS. See the demo section below for a live example.

The Performance Of opacity 1a1n5z

Paul Irish and Addy Osmani discussed the performance of the opacity property and shared the following results:

Opacity is one of the few CSS properties that can be properly accelerated because the GPU can manipulate it easily.

Basically, any layer where you want to fade the opacity over a CSS transition or animation, the browser is actually smart enough to throw it onto the GPU and do the manipulation over there and it’s going to be very fast.

Of all CSS things, opacity is one of the most performant and you’re not going to have problems using it.

img {
    opacity: 0.3;
    transition: opacity .6s;
}

img:hover {
    opacity: 1;
}
                

img {
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
}