Append /N to any color utility for alpha: the engine emits the correct color-mix/rgba.

html
<div class="bg-slate-900/75 backdrop-blur">Overlay</div>
<p class="text-white/60">Secondary text</p>
<div class="ring-1 ring-black/10">Hairline ring</div>

Canonical uses#

  • Overlays: bg-black/50 above modals
  • Hairlines: ring-black/10 (light) / ring-white/10 (dark)
  • Secondary text: text-white/70 on dark heroes
  • Tinted surfaces: bg-blue-500/10 for info panels

Arbitrary alpha#

html
<div class="bg-blue-500/[0.33]">Precise 33%</div>
Warning. Alpha colors over images need a backdrop — test on real content, not white artboards.