Opacity
Control the opacity of elements with simple, one-class utilities.
Opacity utilities
| Class | opacity |
|---|---|
.opacity-0 | 0 |
.opacity-10 | 0.1 |
.opacity-25 | 0.25 |
.opacity-50 | 0.5 |
.opacity-75 | 0.75 |
.opacity-100 | 1 |
100
75
50
25
<div class="opacity-75">...</div>Usage
Opacity utilities are used heavily in components like buttons (disabled state) and toasts. You can combine them with color utilities for expressive, translucent UI.