Opacity - Property CSS

opacity

Summary of characteristics of the opacity property

Quick description
Sets the opacity (inverse of transparency) of an element and its descendants.
Status
Standard
Usable for
HTML, SVG
Percentages
Calculated with respect to 1 (complete opacity).
Initial value
1
Inherited by default
No.
Animation type
Computed value : during an animation, the opacity property gradually changes from one value to another.
W3C Module
CSS Color Module
References (W3C)
 ðŸ¡‡  
 ðŸ¡…  
Document status: WD (Working Draft)
Document status: REC (Recommendation)

Description of the opacity property.

The opacity property defines the opacity of an element, that is to say its degree of transparency. This property allows making an element semi-transparent (or completely transparent). It applies to an element as a whole: its outline, background, and its descendants.

Note: To manage the opacity of a background alone, it is preferable to apply a semi-transparent color to this background: using the rgba() function or another method, or an 8-digit color code. See Colors.

The property opacity has the particularity that it applies to the entire set consisting of the element itself and its descendants. And this in a global way, rather than element by element. In other words, if an opacity of 0.5 is requested, it will be applied to the entire constructed set, and not to each of the elements. Therefore, this is not the usual inheritance mechanism; in fact, it is not possible to restore the initial opacity of the child elements.

Rear
Middle
Front

This first image shows you the construction of our example: a first block called "Rear" is colored blue and has a background image. It contains the block named "Médian" with a background image (the circles), which in turn contains the front block with a white background.
Here the property opacity has not been used: all the blocks are therefore completely opaque.

‹div id="rear"› ‹div id="median"› ‹div id="front"› ‹/div› ‹/div› ‹/div›
Rear
Médian
Front

The opacity of the middle block is now reduced to 0.5. The color and image of the back block are therefore slightly visible. It is also visible through the front block but without the background of the middle block being visible. So it is not the front block that has lost opacity, but rather the entire structure made up of the two blocks (middle block and its descendant, the front block).

Rear
Médian
Front

In this third sample, the middle block still has an opacity of 0.5, but the front block has a requested opacity of 1. We can see that this does not change anything: the front block still lets the blue color and the image of the back block show through. Therefore, it is not the usual inheritance mechanism at work.

Rear
Médian
Front

This overall opacity persists even in the parts that overflow from the parent, as is the case here.

Values for opacity.

  • opacity: 0.5;

    A number without a unit, between 0 and 1. Negative values are treated as 0.
    1 corresponds to full opacity (no transparency)
    0 corresponds to total transparency (invisible element).
    In this example, the opacity of the element will be 50% (semi-transparent).
    The default value is 1 (total opacity).

  • opacity: 30%;

    Opacity can also be indicated in percentages, 100% corresponding to total opacity, and 0% to an invisible element as it is completely transparent.

Common values:

opacity: initial (1) opacity: inherit opacity: revert opacity: revertLayer opacity: unset

These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Animation of the opacity property.

In the example below, the logos of Edge and Internet Explorer are overlaid. By adjusting the transparency of the Edge logo (which is on top), we reveal more or less of the Internet Explorer logo.

Animation of the opacity property Animation of the opacity property

Manipulating the opacity property programmatically.

Change the opacity in Javascript.

Here is how to modify the value of opacity for an element el using Javascript. We see that Javascript offers a syntax with the typical CSS notation, in kebab-case (a hyphen to separate the words), and another syntax with the camel-case notation (an uppercase letter to separate the words).

Javascript
let el = document.getElementById('id'); el.style['opacity'] = '0.5'; // or let el = document.getElementById('id'); el.style.opacity = '0.5';

Read the opacity in Javascript.

The code given below explores the style attribute of the element. It therefore only retrieves a value if opacity has been initialized in this attribute, and not via a CSS selector.

Javascript
let el = document.getElementById('id'); let value = el.style['opacity']; // or let el = document.getElementById('id'); let value = el.style.opacity;

Read the computed value of opacity in Javascript.

The calculated value is the one resulting from the cascade of inheritances. It is returned in the form of a decimal number between 0 and 1, even if it was defined in percentages.

Javascript
let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('opacity');

Change the opacity with JQuery.

JQuery

$('#id').css('opacity', '0.5');

Read the computed value of opacity in JQuery

The value of opacity is returned as a decimal number between 0 and 1.

JQuery
let value = $('#id').css('opacity');

Other code examples.

Other examples of Javascript and JQuery code are provided on the page Javascript and CSS.

Take the test yourself.

The buttons below apply the entered value to the property opacity and then display either the value as it has been applied, or the calculated value. This second option allows us to see how the value of opacity is stored (serialized). It is particularly noticeable that percentages are converted to decimal numbers.

Simulator.

The opacity set on an element affects the entire group composed of the element itself and its descendants. This is particularly noticeable on the table, where we can see that the transparency also applies to the rows and cells of the table.

opacity :

Effect of opacity on text

Example for the property opacity
123
456

Browsers compatibility with opacity.

The property opacity is very well managed by the main browsers. No compatibility issues have been reported, including for values expressed in percentages, which took a little longer to be accounted for.

Column 1
Support by browsers for a method to adjust the opacity of an element (its transparency).
Column 2
Support percentages for the opacity value.
1
opacity
property
2
Value in
percentage
Estimated overall support.
98%
95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse

Historic of the opacity property.

  • CSS Color Module Level 3

    Introduction of the opacity property.
    WD
    June 23, 1999
    Working Draft.
    CR
    May 14, 2003
    Candidate Recommendation.
    PR
    October 28, 2010
    Proposed for recommendation.
    REC
    June 07, 2011
    Recommendation .

  • CSS Color Module Level 4

    Adding percentages as a value for the opacity property.
    WD
    July 05, 2016
    Working Draft.
    CR
    July 05, 2022
    Candidate Recommendation.
    PR
    REC

See also, regarding colors.

The CSS specifications published by the W3C are organized into modules. The property opacity is part of the CSS Color Module. The following definitions are also described in this same module.

Properties:

color
Langue française
Defines the color of the foreground (mainly text).

Functions:

color()
Langue française
Defines a color in a color space other than sRGB.
color-mix()
Langue française
Mix two colors in a given color space.
âš 
device-cmyk()
Langue française
Define a color based on a device, specifying cyan, magenta, yellow, and black values.
hsl()
Determines a color from the Hue, Saturation and Brightness settings, an alternative closer to our way of thinking.
hsla()
Langue française
Determines a color and its transparency from the Hue, Saturation, Brightness and Alpha parameters.
hwb()
Langue française
Defines a color based on its hue and a dose of black and white.
lab()
Langue française
Defines a color in the L*a*b* system.
lch()
Langue française
Defines a color in the L*C*H* system.
oklab()
Langue française
Defines a color in the L*a*b* system with a perceptual correction.
oklch()
Langue française
Defines a color in the L*C*H* system with a perceptual correction
rgb()
Determines a color from the values ​​of Red, Green and Blue.
rgba()
Langue française
Determines a color and its transparency from the values ​​of Red, Green, Blue and the Alpha value.

At-rules:

@color-profile
Langue française
Specifies a color profile that can then be used by the color() function.

Descriptors :

âš 
components
Langue française
Descriptor usable with the @color-profile at-rule.
âš 
rendering-intent
Langue française
Descriptor usable with the @color-profile directive. Defines the method for converting from one color profile to another.