← Back to properties

CSS Property

opacity

Visibility

Sets the transparency level of an element and all its children.

Syntax

opacity: value;

Example

opacity: 0.5;

Common use cases

  • Fading disabled elements
  • Hover transparency effects
  • Animated fade in/out transitions

Practical developer insight

opacity affects the entire element including children — use background-color with alpha (rgba or hex8) if you only want a transparent background. Note: opacity less than 1 also creates a new stacking context, which can affect z-index behavior.

Related properties

displaytransition