Opacity

Overview

The bundle ships every 5% step from opacity-0 through opacity-100 for overlays, disabled states, and layered interfaces.

Ensure text remains readable when opacity reduces contrast. Decorative overlays can go low; body text usually should not.

Use Lower Values for Overlays

opacity-10 through opacity-50 work well for dimming media or stacking panels.

Use Higher Values for State Changes

opacity-60 through opacity-95 can suggest disabled or loading states while keeping content visible.

Avoid Overusing Transparency

Too many translucent layers can make interfaces feel muddy and hard to read.

Pair With Positioning

Overlays usually combine opacity with .relative, .absolute, or .fixed.

Overview of the currently shipped effects surface

Color utilities that work with opacity