Opacity

Control element transparency from fully transparent to fully opaque for layering and visual hierarchy.

Opacity Values

opacity-0

Fully transparent
opacity-0

opacity-25

25% opacity
opacity-25

opacity-50

50% opacity
opacity-50

opacity-75

75% opacity
opacity-75

opacity-100

Fully opaque
opacity-100

Interactive Opacity Demo

Customize Opacity

0%25%50%75%100%

Preview

Opacity Preview

100%

Opacity: 100%
CSS: opacity: 1.00
Back to Effects