opacity
Quick Summary for 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.
Code Usage for opacity
opacity: 0.9 opacity: 90%  /* Global values */ opacity: inherit; opacity: initial; opacity: revert; opacity: unset; 
More Details for opacity

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.

Syntax

opacity: 0.9 opacity: 90%  /* Global values */ opacity: inherit; opacity: initial; opacity: revert; opacity: unset; 

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.

To change the opacity of a background only, use the background property with a color value that allows for an alpha channel. 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 value1
Applies toall elements
Inheritedno
Percentagesmap to the range [0,1]
Computed valueThe same as the specified value after clipping the <number> to the range [0.0, 1.0].
Animation typeby computed value type

Formal syntax

<alpha-value>

where <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
<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; 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
<div class="wrapper">   <img src="//interactive-examples.mdn.mozilla.net/media/dino.svg"   alt="MDN Dino" width="128" height="146"   class="opacity"> </div> 
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,.5) 50%);   background-size: 20px 20px; } 
Result

Specifications

Specification
CSS Color Module Level 4 # transparency

Last modified: Sep 2, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiPortuguês (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Most people can do absolutely awe-inspiring things,” he said. “Sometimes they just need a little nudge.
Unknown
Random CSS Property

min-block-size

The min-block-size CSS property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of writing-mode.
min-block-size css reference