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.

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);



A <number> in the range 0.0 to 1.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 between 0 and 1 The element is translucent (that is, content behind the element can be seen).
1 The element is fully opaque (visually solid).

Formal syntax



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"


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
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

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 Yes


1 — 3.5 -moz-

9 9 1.2
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support 1 Yes Yes 4 9 3.2 ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.