Opacity & Blend Modes

Control element opacity and how it visually blends with the content behind it.

4 min read Level 1/5 #tailwind#effects

What you'll learn

Use the opacity-0 to opacity-100 scale
Use mix-blend and bg-blend modes
Combine opacity with group-hover for reveals

Opacity fades a whole element; blend modes change how its pixels mix with what is behind. Both are one-utility effects.

Element Opacity

<button class="opacity-50" disabled>Disabled</button>
<div class="opacity-0 group-hover:opacity-100 transition-opacity">
  Revealed on hover of the group
</div>

That reveal pattern — opacity-0 plus group-hover:opacity-100 — is everywhere: overlay captions, action buttons on cards, and so on.

Blend Modes

mix-blend-* blends an element with whatever sits behind it; bg-blend-* blends a background image with its background color:

<img class="mix-blend-multiply" src="/photo.jpg" />
<div class="bg-blue-500 bg-[url(/grain.png)] bg-blend-overlay h-40"></div>

mix-blend-multiply is the standard trick for tinting a photo to match a brand color.

Opacity vs Color Opacity

Important distinction: if you only want a color to fade, use the /NN color modifier (like bg-black/50) rather than opacity-50. Element opacity also fades every child, including text — usually not what you want.

Filters →