Opacity

Opacity utilities for controlling the transparency of elements.

Opacity Scale

Control the opacity/transparency of an element from 0 (invisible) to 100 (fully opaque).

CSS

.opacity-0    /* opacity: 0 (completely invisible) */
.opacity-5    /* opacity: 0.05 */
.opacity-10   /* opacity: 0.1 */
.opacity-20   /* opacity: 0.2 */
.opacity-25   /* opacity: 0.25 */
.opacity-30   /* opacity: 0.3 */
.opacity-40   /* opacity: 0.4 */
.opacity-50   /* opacity: 0.5 */
.opacity-60   /* opacity: 0.6 */
.opacity-70   /* opacity: 0.7 */
.opacity-75   /* opacity: 0.75 */
.opacity-80   /* opacity: 0.8 */
.opacity-90   /* opacity: 0.9 */
.opacity-95   /* opacity: 0.95 */
.opacity-100  /* opacity: 1 (fully opaque) */

Responsive Opacity

Apply opacity utilities at specific breakpoints.

CSS

/* Responsive variants for xxl breakpoint */
.xxl:opacity-0 .xxl:opacity-5 .xxl:opacity-10 .xxl:opacity-20
.xxl:opacity-25 .xxl:opacity-30 .xxl:opacity-40 .xxl:opacity-50
.xxl:opacity-60 .xxl:opacity-70 .xxl:opacity-75 .xxl:opacity-80
.xxl:opacity-90 .xxl:opacity-95 .xxl:opacity-100

Visual Examples

.opacity-0

.opacity-25

.opacity-50

.opacity-75

.opacity-100

Common Patterns

Hover Opacity Effect

HTML

<button class="opacity-75 hover:opacity-100 transition-opacity">
  Hover to reveal fully
</button>

Disabled State

HTML

<button class="disabled:opacity-50" disabled>
  Disabled Button
</button>

Loading Overlay

HTML

<div class="relative">
  <div>Content</div>
  <div class="absolute inset-0 bg-white opacity-75 flex items-center justify-center">
    <span>Loading...</span>
  </div>
</div>

Image Overlay Effect

HTML

<div class="relative group">
  <img src="photo.jpg" alt="Photo">
  <div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition-opacity">
    <span class="text-white opacity-0 group-hover:opacity-100">View Details</span>
  </div>
</div>