New

Stable version of Uniform CSS now officially released! Release note

Opacities

Visual reference of all default opacities.


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>