Widely available Useful for nuanced state changes, but it should not be the only cue for important status or interactivity.

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.

VisualTransparencyStates

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
opacity
1
12
1
2
18
1
percentages

Support for percentage opacity values
78
79
70
13.1
78
13.4
Other
css.types.number

The CSS data type represents a number, being either an integer, a number with a fractional component, or a base-ten exponent in scientific notation.
1
12
1
1
18
1
CSS type
scientific notation

Scientific notation
43
12
29
10.1
43
10.3
Other
svg.global_attributes.opacity

The opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.
1
12
1
2
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (3.5)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (2)
Compatibility
  • Available with a vendor prefix: -khtml- (1.1)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (3.5)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (2)
Compatibility
  • Available with a vendor prefix: -khtml- (1.1)

Syntax

CSS 
/* Semi-transparent */
.overlay {
  opacity: 0.5;
}

/* Fade-in animation */
.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fade-in.visible {
  opacity: 1;
}

/* Disabled state */
.disabled {
  opacity: 0.4;
  pointer-events: none;
}

Live demo

stage opacity

opacity property stage opacity demo.

PreviewFullscreen

hover in fade in

opacity property hover in fade in demo.

PreviewFullscreen

Disabledstate. Represent

opacity property Disabledstate. Represent demo.

PreviewFullscreen

Use cases

  • De-emphasized elements

    Reduce the visual weight of secondary content, overlays, or background layers.

  • Disabled-like states

    Support disabled or inactive styling as one cue among several.

Cautions

  • Lowering opacity affects all descendants, including text, which can easily harm contrast.
  • Very low-opacity states can make content look broken or hidden instead of intentionally inactive.

Accessibility

  • If opacity suggests disabled state, pair it with semantics and other visible cues rather than color/transparency alone.

Related links