Opacity & Mix Blend

Opacity & Blend Modes

Opacity

opacity-<n> controls the whole element's transparency:

<div class="opacity-50">50% visible</div>
<div class="opacity-0">Fully transparent</div>

Any value from 0 to 100 works (opacity-15, opacity-75), plus opacity-(--my-var).

Mix-blend modes

Blend an element with what's behind it:

<div class="bg-sky-500 mix-blend-multiply">...</div>

• mix-blend-normal, mix-blend-multiply, mix-blend-screen, mix-blend-overlay, mix-blend-darken, mix-blend-lighten, mix-blend-color-dodge, mix-blend-color-burn, mix-blend-hard-light, mix-blend-soft-light, mix-blend-difference, mix-blend-exclusion, mix-blend-hue, mix-blend-saturation, mix-blend-color, mix-blend-luminosity.
• mix-blend-plus-darker, mix-blend-plus-lighter.

Background blend modes

Blend an element's own backgrounds:

<div class="bg-[url(...)] bg-sky-500 bg-blend-multiply">...</div>

• bg-blend-normal, bg-blend-multiply, bg-blend-screen, bg-blend-overlay, etc.

Isolation

isolate isolates blending to a subtree.

TL;DR

• opacity-50 sets element transparency.
• mix-blend-multiply blends with content behind.
• bg-blend-* blends an element's own backgrounds.
• isolate scopes blending.