Web/CSS/opacity

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.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

Values

<alpha-value>

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

Description

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.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Formal definition

Initial value	1.0
Applies to	all elements
Inherited	no
Computed value	the specified value, clipped in the range [0,1]
Animation type	a number

Formal syntax

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

Examples

Setting background opacity

HTML

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

CSS

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

HTML

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

CSS

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

Specifications

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

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
opacity	Chrome Full support 1	Edge Full support 12	Firefox Full support 1 Full support 1 No support 1 — 3.5 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	IE Full support 9	Opera Full support 9	Safari Full support 2 Full support 2 No support 1.1 — 2 Prefixed' Prefixed' Implemented with the vendor prefix: -khtml-	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
Support for percentage opacity values	Chrome Full support 78	Edge Full support 79	Firefox Full support 70	IE No support No	Opera No support No	Safari No support No	WebView Android Full support 78	Chrome Android Full support 78	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android Full support 12.0

Legend

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

• Microsoft's filter:alpha(opacity=xx)

opacity by Mozilla Contributors is licensed under CC-BY-SA 2.5.