The opacity
CSS property specifies the level of transparency of an element, that is, the degree to which the content behind the element is visible.
/* Fully opaque */ opacity: 1; opacity: 1.0; /* Translucent */ opacity: 0.6; /* Fully transparent */ opacity: 0; opacity: 0.0; /* Global values */ opacity: inherit; opacity: initial; opacity: unset;
opacity
applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.
Using opacity
with a value other than 1
places the element in a new stacking context.
If you do not want to apply opacity to child elements, use the background
property instead. For example:
background: rgba(0, 0, 0, 0.4);
Initial value | 1.0 |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual |
Computed value | the specified value, clipped in the range [0,1] |
Animation type | a number |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
<number>
- A
<number>
in the range0.0
to1.0
, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.Value Meaning 0
The element is fully transparent (that is, invisible). Any <number>
strictly between0
and1
The element is translucent (that is, content behind the element can be seen). 1
The element is fully opaque (visually solid).
Formal syntax
<number>
Examples
Basic example
div { background-color: yellow; } .light { opacity: 0.2; /* Barely see the text over the background */ } .medium { opacity: 0.5; /* See the text more clearly over the background */ } .heavy { opacity: 0.9; /* See the text very clearly over the background */ }
<div class="light">You can barely see this.</div> <div class="medium">This is easier to see.</div> <div class="heavy">This is very easy to see.</div>
Different opacity with :hover
img.opacity { opacity: 1; filter: alpha(opacity=100); /* IE8 and lower */ zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */ } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; }
<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity">
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'opacity' in that specification. |
Working Draft | Defines opacity as animatable. |
CSS Color Module Level 3 The definition of 'opacity' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier)[1] | 9.0[2] 8.0 4.0 |
9.0 | 1.2 (125)[3] |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7)[1] | 9.0[2] 8.0 4.0 |
9.0 | 3.2 |
[1] Prior to Gecko 1.7 (Firefox 0.9), the -moz-opacity
property was implemented in a non-standard (inherited) way. With Firefox 0.9 the behavior changed and the property was renamed to opacity
. After that, -moz-opacity
was just an alias for opacity
. Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0) and later do not support -moz-opacity
, and support for MozOpacity
in JavaScript was removed in Gecko 13 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10). Today, you should be using simply opacity
.
[2] Prior to version 9, Internet Explorer did not support opacity
. Instead, it supported a filter
property with a value of alpha(opacity=xx)
or "alpha(opacity=xx)"
(both being equivalent). IE4 to IE9 supported the extended-form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)
. IE8 introduced -ms-filter
, synonymous with filter
. Both were removed in IE10.
[3] Similarly to -moz-opacity
, -khtml-opacity
has been dead since early 2004 (release of Safari 1.2). Konqueror never had support for -khtml-opacity
and had been supporting opacity
since version 4.0.