Working with Color Opacity in Tailwind CSS - Tailwind CSS Tutorial

beginner8 min readtutorial

Color Opacity in Tailwind

Tailwind v3+ introduced opacity modifiers that let you adjust color opacity directly in the class name. This eliminates the need for custom CSS or separate opacity utilities.

The Opacity Modifier Syntax

Add a slash and opacity value to any color class:

<div class="bg-blue-500/50">50% opacity blue background</div>
<div class="text-slate-900/75">75% opacity text</div>
<div class="border-red-500/25">25% opacity border</div>
<div class="shadow-black/10">10% opacity shadow</div>

Available Opacity Values

By default, Tailwind provides these opacity values: 0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100. You can use arbitrary values like /[0.33] for custom opacities.

Common Use Cases

Overlays: bg-black/50 for modal backdrops
Hover states: hover:bg-blue-500/10 for subtle hover effects
Disabled states: Use lower opacity for disabled elements
Glassmorphism: Combine bg-white/30 with backdrop-blur
Shadows: shadow-lg shadow-blue-500/25 for colored shadows

<!-- Modal overlay -->
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm">
  <div class="bg-white p-6 rounded-lg">
    Modal content
  </div>
</div>

<!-- Glassmorphism card -->
<div class="bg-white/30 backdrop-blur-lg border border-white/20 rounded-xl p-6">
  Frosted glass effect
</div>

<!-- Colored shadow -->
<button class="bg-blue-500 shadow-lg shadow-blue-500/50">
  Glowing button
</button>

Frequently Asked Questions

What's the difference between bg-opacity and /opacity modifier?

The /opacity modifier (e.g., bg-blue-500/50) is the modern approach in Tailwind v3+. It's more intuitive and works with any color property. The old bg-opacity-{value} still works but is less flexible.

Can I use custom opacity values?

Yes! Use arbitrary values like bg-blue-500/[0.33] or bg-blue-500/[77%] for any opacity value not in the default scale.