Effects
Opacity
Utilities for controlling the opacity of an element.
Quick reference
| Class | Description |
|---|---|
opacity-0 | opacity: 0% |
opacity-25 | opacity: 25% |
opacity-50 | opacity: 50% |
opacity-75 | opacity: 75% |
opacity-100 | opacity: 100% |
Basic usage
Changing an element's opacity
Control the opacity of an element using the opacity-{amount} utilities.
100%
75%
50%
25%
0%
html
<div class="opacity-100 ...">100%</div>
<div class="opacity-75 ...">75%</div>
<div class="opacity-50 ...">50%</div>
<div class="opacity-25 ...">25%</div>
<div class="opacity-0 ...">0%</div>