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
| Class | Value | CSS | Usage |
|---|
.opacity-0 | 0% | opacity: 0; | Completely transparent |
.opacity-25 | 25% | opacity: 0.25; | Very transparent |
.opacity-50 | 50% | opacity: 0.5; | Semi-transparent |
.opacity-75 | 75% | opacity: 0.75; | Mostly opaque |
.opacity-100 | 100% | 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
