Tailwind CSS Academy · Lesson

Opacity and Color Modifiers

Use the slash opacity modifier syntax like bg-blue-500/50 to control transparency on backgrounds and text.

The opacity Property in CSS

CSS opacity controls the overall transparency of an element, from 0 (invisible) to 1 (fully opaque). The critical thing to understand is that opacity is inherited by children: setting opacity: 0.5 on a card also makes its text, images, and buttons 50% transparent. This is often not what you want — you usually only need the background to be transparent, not the content.

<!-- opacity affects EVERYTHING including children -->
<div class="opacity-50 bg-blue-600 p-6">
  <p class="text-white">This text is also 50% transparent (probably not intended)</p>
</div>

Tailwind's opacity-* Utilities

Tailwind maps opacity-* utilities to CSS opacity values. Available steps include opacity-0, opacity-5, opacity-10, opacity-25, opacity-50, opacity-75, opacity-90, opacity-95, and opacity-100. These are useful for disabled states, hover fades, and overlay elements where you intentionally want the whole element to be semi-transparent.

<!-- Disabled button with reduced opacity -->
<button class="bg-indigo-600 text-white px-6 py-2 rounded opacity-50 cursor-not-allowed">
  Disabled
</button>

<!-- Loading overlay -->
<div class="fixed inset-0 bg-white opacity-75"></div>

All lessons in this course

← Back to Tailwind CSS Academy