Opacity

Use the bundled opacity scale for overlays, states, and layered interfaces.

Overview

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

Class	Value	CSS
.opacity-0	0%	opacity: 0;
.opacity-5	5%	opacity: 0.05;
.opacity-10	10%	opacity: 0.1;
.opacity-15	15%	opacity: 0.15;
.opacity-20	20%	opacity: 0.2;
.opacity-25	25%	opacity: 0.25;
.opacity-30	30%	opacity: 0.3;
.opacity-35	35%	opacity: 0.35;
.opacity-40	40%	opacity: 0.4;
.opacity-45	45%	opacity: 0.45;
.opacity-50	50%	opacity: 0.5;
.opacity-55	55%	opacity: 0.55;
.opacity-60	60%	opacity: 0.6;
.opacity-65	65%	opacity: 0.65;
.opacity-70	70%	opacity: 0.7;
.opacity-75	75%	opacity: 0.75;
.opacity-80	80%	opacity: 0.8;
.opacity-85	85%	opacity: 0.85;
.opacity-90	90%	opacity: 0.9;
.opacity-95	95%	opacity: 0.95;
.opacity-100	100%	opacity: 1;

Example

Best Practices

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

1. Use Lower Values for Overlays

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

2. Use Higher Values for State Changes

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

3. Avoid Overusing Transparency

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

4. Pair With Positioning

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

Related Utilities

Effects Overview

Overview of the currently shipped effects surface

Colors

Color utilities that work with opacity