CSS - opacity

The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.


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"


/* Fully opaque */
opacity: 1;
opacity: 1.0;

/* Translucent */
opacity: 0.6;

/* Fully transparent */
opacity: 0.0;
opacity: 0;

/* Global values */
opacity: inherit;
opacity: initial;
opacity: unset;


Is a <number> in the range 0.0 to 1.0, both included, 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, background can be seen).
1 The element is fully opaque (solid).

Formal syntax

<a href="css/number" title=""><number></a>


The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

If you do not want apply opacity to child element - use this instead:

background: rgba(0, 0, 0, 0.4);

Using this property with a value different than 1 places the element in a new stacking context.

Initial value1.0
Applies toall elements
Computed valuethe specified value, clipped in the range [0,1]
Animatableyes, as a number
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier)[1] 9.0[2]
9.0 1.2 (125)[3]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.7)[1] 9.0[2]
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. Since then -moz-opacity was supported just as 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). By now, you should be using simply opacity.

[2] Prior to version 9, Internet Explorer does not support opacity, rather it supports a filter property instead with alpha(opacity=xx) or "alpha(opacity=xx)" as value (both are synonymous). IE4 to IE9 supported the extended form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx). IE8 introduced -ms-filter, which is synonymous with filter. Both are gone in IE10.

[3] Similar 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.

See Also  


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


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

CSS CSS Property CSS3 css3-color Experimental Reference