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.
Try it
Syntax
css
opacity: 0.9;
opacity: 90%;
/* Global values */
opacity: inherit;
opacity: initial;
opacity: revert;
opacity: revert-layer;
opacity: unset;
Values
<alpha-value>
-
A
<number>
in the range0.0
to1.0
, inclusive, or a<percentage>
in the range0%
to100%
, 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
(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.
To change the opacity of a background only, use the background
property with a color value
that allows for an alpha channel. For example:
css
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 value | 1 |
---|---|
Applies to | all elements |
Inherited | no |
Percentages | map to the range [0,1] |
Computed value | The same as the specified value after clipping the <number> to the range [0.0, 1.0]. |
Animation type | by computed value type |
Formal syntax
opacity =
<alpha-value>
<alpha-value> =
<number> |
<percentage>
Examples
Setting opacity
The following example demonstrates how the opacity
property changes the opacity of the entire element and content, thus making the text very hard to read.
HTML
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
css
div {
background-color: yellow;
font-weight: bold;
font-size: 130%;
}
.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 */
}
Result
Setting opacity on hover
In the following example opacity is changed on hover, so the striped background image on the parent element shows through the image.
HTML
html
<div class="wrapper">
<img
src="//interactive-examples.mdn.mozilla.net/media/dino.svg"
alt="MDN Dino"
width="128"
height="146"
class="opacity" />
</div>
CSS
css
img.opacity {
opacity: 1;
}
img.opacity:hover {
opacity: 0.5;
}
.wrapper {
width: 200px;
height: 160px;
background-color: #f03cc3;
background-image: linear-gradient(
90deg,
transparent 50%,
rgba(255, 255, 255, 0.5) 50%
);
background-size: 20px 20px;
}
Result
Specifications
Specification |
---|
CSS Color Module Level 4 # transparency |
Browser compatibility
BCD tables only load in the browser