CSS Reference Property

opacity

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.

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.

Trivia & Notes

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 stacking context for its children. This means that any content outside of it cannot be layered in z-order between pieces of content inside of it, and vice versa. See the 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`

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.

Official Syntax

Syntax:
```
opacity: <number>
```
Initial: 1
Applies To: all elements
Animatable: yes, as a number

Values

<number>

Any <number> between 0 and 1 included.

A value of 0 will render the element fully transparent (invisible). A value of 1 will render the element fully opaque (default value). Any number between 0 and 1 will make the element translucent (semi-transparent), and any backgrounds and elements behind it / under it will show through.

Examples

The following makes an image translucent, and then animates it into fully opaque on hover, using a CSS Transition, creating a subtle fade-in effect.

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

img:hover {
    opacity: 1;
}

The following example is compatible with versions of Internet Explorer that don’t support the opacity property. See the Browser Support section below for details.

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

Live Demo

View this demo on the Codrops Playground

Browser Support

CSS3 Opacity

Method of setting the transparency level of an element

W3C Recommendation

Supported from the following versions:

Desktop

Mobile / Tablet

* denotes prefix required.

Supported:
Yes
No
Partially
Polyfill

Stats from caniuse.com

Notes

Internet Explorer versions prior to version 9 do not support the opacity property, but support the non-standard filter property instead. IE 5-7 support the filter: alpha(opacity=xx) form.

IE8 and IE9 support the extended form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx); the extended form is more valid in IE 8 and 9 but not needed since the short form filter: alpha(opacity=xx) works too. IE8 introduced -ms-filter, which is synonymous with filter. Both are gone in IE10.

The opacity property is supported by every major browser (and from IE9 on).