opacity

Sets the transparency level of an element. A value of 0 is fully transparent, while 1 is fully opaque.

Quick example

.overlay {
  opacity: 0.5;
  /* element becomes 50% see-through */
}

Quick facts

Initial value
1
Inherited
No
Applies to
all elements
Animation type
byComputedValueType

opacity Browser Support

Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

Safe to use without fallbacks.

1+
1+
2+
12+
ESC