Skip to main content

​
Overview

Control element transparency with opacity utilities. Use opacity to create overlays, disabled states, hover effects, and layered visual effects. All opacity utilities are GPU-accelerated for smooth performance. Opacity utilities provide fine-grained control over element transparency, perfect for creating depth, indicating states, and building modern UI patterns.

​
Opacity Scale

Opacity Utilities

.opacity-00%opacity: 0;Completely transparent
.opacity-2525%opacity: 0.25;Very transparent
.opacity-5050%opacity: 0.5;Semi-transparent
.opacity-7575%opacity: 0.75;Mostly opaque
.opacity-100100%opacity: 1;Completely opaque

​
Quick Start

​
Basic Opacity

<!-- Overlay effect -->
<div class="relative">
  <img src="image.jpg" class="w-full h-64 object-cover" alt="Background">
  <div class="absolute inset-0 bg-black opacity-50"></div>
  <div class="absolute inset-0 flex items-center justify-center">
    <h2 class="text-white text-2xl font-bold">Overlay Text</h2>
  </div>
</div>

<!-- Disabled state -->
<button class="btn btn-blue opacity-50 cursor-not-allowed">
  Disabled Button
</button>

​
Common Use Cases

  • Overlays: Create image overlays and modal backgrounds
  • Disabled States: Indicate disabled form fields and buttons
  • Hover Effects: Add interactive opacity transitions
  • Loading States: Show loading overlays on content
  • Layered Effects: Build depth with multiple opacity layers

​
Accessibility

Accessibility Note: Ensure sufficient contrast when using opacity. Text with low opacity may not meet accessibility standards.

Opacity Guidelines

  • Text: Avoid opacity below 75% for readable text - Interactive elements: Use opacity to indicate disabled states - Overlays: Use opacity to create depth without hiding content completely - Focus states: Ensure focus indicators remain visible with opacity

Colors

Color utilities that work with opacity

Layout

Positioning utilities for overlay effects

Components

Pre-built components with opacity effects

Positioning

Z-index utilities for layered effects