Visual Reference
The following table visually represents all the opacities that are available.
| Reference | Class | Opacity |
|---|---|---|
opacity-0 |
0 | |
opacity-2 |
0.02 | |
opacity-4 |
0.04 | |
opacity-6 |
0.06 | |
opacity-8 |
0.08 | |
opacity-10 |
0.1 | |
opacity-15 |
0.15 | |
opacity-20 |
0.2 | |
opacity-25 |
0.25 | |
opacity-30 |
0.3 | |
opacity-35 |
0.35 | |
opacity-40 |
0.4 | |
opacity-45 |
0.45 | |
opacity-50 |
0.5 | |
opacity-55 |
0.55 | |
opacity-60 |
0.6 | |
opacity-65 |
0.65 | |
opacity-70 |
0.7 | |
opacity-75 |
0.75 | |
opacity-80 |
0.8 | |
opacity-85 |
0.85 | |
opacity-90 |
0.9 | |
opacity-95 |
0.95 | |
opacity-100 |
1 |
Basic Usage
Apply opacity effect with the opacity-<variant> utility..
<div class="opacity-20 ...">
...
</div>Color Opacity Usage
Opacities can also be applied to color related properties such as background-color, border-color, color, and etc.
<div class="bg-black bg-opacity-50">
...
</div>
<div class="color-red color-opacity-20">
...
</div>