Tailwind Opacity Generator

Combine any color with any opacity using Tailwind's slash modifier (bg-blue-500/50) — previewed over a checkerboard, with the plain-CSS equivalent and the deprecated legacy pattern explained.

The slash modifier, demystified

Modern Tailwind attaches opacity directly to a color utility: bg-blue-500/50 is a 50%-opaque blue background. This small tool exists because the OLD way — separate bg-opacity-50 utilities — still litters tutorials and legacy codebases, and it was removed in v4. Pick utility, color and opacity; the checkerboard preview shows the real translucency, and the legacy tab documents exactly what to migrate away from.

Worked example

<div class="bg-black/60">…</div>

/* CSS equivalent */
background-color: rgb(0 0 0 / 0.6);

When to use it

• Image overlays: bg-black/60 behind hero text is the classic readability scrim.
• Subtle brand tints: bg-blue-500/10 for highlighted sections.
• Muted text without a second color: text-gray-900/70.

Limitations

• The slash modifier fades one property’s color; fading a WHOLE element (children included) is the separate opacity-* utility — different tool, different effect.
• Translucent text over unknown backgrounds needs a contrast check — the WCAG checker takes the flattened color.

Powered by