The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.



A <number> in the range 0.0 to 1.0, inclusive, or a <percentage> in the range 0% to 100%, 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 (default value) The element is fully opaque (visually solid).


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

Accessibility concerns

If text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminosity of the opacity-adjusted text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

Formal definition

Initial value1.0
Applies toall elements
Computed valuethe specified value, clipped in the range [0,1]
Animation typea number

Formal syntax


<alpha-value> = <number> | <percentage>


Setting background opacity


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


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


Setting opacity on hover


<img src="//developer.mozilla.org/static/img/opengraph-logo.png"
  alt="MDN logo" width="128" height="146"


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;



Specification Status Comment
CSS Color Module Level 4
The definition of 'opacity' in that specification.
Working Draft Defines percentage opacity values.
CSS Color Module Level 3
The definition of 'opacity' in that specification.
Recommendation Initial definition

Browser compatibility

ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
opacityChrome Full support 1Edge Full support 12Firefox Full support 1
Full support 1
No support 1 — 3.5
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 9Opera Full support 9Safari Full support 2
Full support 2
No support 1.1 — 2
Prefixed Implemented with the vendor prefix: -khtml-
WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Support for percentage opacity valuesChrome Full support 78Edge Full support 79Firefox Full support 70IE No support NoOpera No support NoSafari No support NoWebView Android Full support 78Chrome Android Full support 78Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No


Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also