Skip to content
Visuals and effects

opacity

Changes the transparency of an element and all of its descendants. Zero is fully transparent and one is fully opaque.

2,351 effects in the catalog use this property.

Syntax

opacity: <0-1>;

Watch out

Any value below one creates a new stacking context. Descendant `z-index` values are then trapped inside that context, a common cause of unexpected layer ordering.

Effects using opacity

These are working effects from the catalog. Open a tile to inspect the full source.