Capítulo 23 de 29
Visual-effect utilities — box shadow, opacity, blend modes, and CSS masking — each map to a single well-known CSS property; shadows compose color independently from the shadow shape via the same CSS-variable trick used by gradients/filters, and masking (mask-*) is the newest, most elaborate family, supporting both image-based and gradient-generated masks.
box-shadow (--shadow-*): shadow-2xs → shadow-2xl (6 named steps, each a multi-layer shadow value), shadow-none, shadow-(<custom-property>)/shadow-[<value>]. Color composes separately: shadow-<color>/shadow-(color:<custom-property>) overrides just the shadow's color via a dedicated CSS variable, independent of picking the shadow's size/blur step. Inset variant: inset-shadow-* (own --inset-shadow-* scale, smaller: 2xs/xs/sm) plus its own inset-shadow-<color>. Ring-style utilities (ring-*, inset-ring-*) are a related box-shadow-based technique documented alongside border/outline in the Borders chapter's ecosystem — see the Upgrade Guide for the v3→v4 default width/color change.
opacity: opacity-<number> (0–100, e.g. opacity-25), opacity-(<custom-property>), opacity-[<value>].
mix-blend-mode: mix-blend-{normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity} — how an element's rendered content blends with everything beneath it (vs. bg-blend-*, which blends an element's own background layers with each other).
Mask utilities (mask-*, CSS masking — hide parts of an element using another image/gradient as an alpha/luminance map):
| Sub-property | Utilities |
|---|---|
mask-image | mask-[<value>], mask-(<custom-property>), mask-none; generated gradient masks: mask-linear-<number> (angle, negatable), mask-linear-from-*/mask-linear-to-* (fade start/end position), plus equivalent mask-radial-*/mask-conic-* gradient families and mask-t-from-*/-r-/-b-/-l- (edge-fade shorthands) |
mask-mode | mask-alpha, mask-luminance, mask-match (match-source) |
mask-clip | mask-clip-border/-padding/-content/-fill/-stroke/-view, mask-no-clip |
mask-composite (combining multiple masks) | mask-add, mask-subtract, mask-intersect, mask-exclude |
mask-origin | mirrors mask-clip's box keywords |
mask-position | mirrors background-position's 9-point grid + arbitrary |
mask-repeat | mirrors background-repeat's value set |
mask-size | mirrors background-size (mask-auto/mask-cover/mask-contain/arbitrary) |
mask-type (for SVG <mask> elements) | mask-type-alpha, mask-type-luminance |
<div class="rounded-xl shadow-lg shadow-indigo-500/25">Card</div>
<div class="mask-linear-to-t from-black to-transparent">...</div>
<img class="mix-blend-multiply" src="/photo.jpg" />
mix-blend-multiply for a common photo-treatment effect.shadow-lg + shadow-indigo-500/25) — no need to hand-write a custom shadow value just to recolor one.mask-linear-*/mask-radial-*/mask-conic-* generate a gradient mask directly in CSS — no separate PNG/SVG mask asset needed for common edge-fade effects.mix-blend-mode blends against what's behind the element in the stacking context; background-blend-mode (Backgrounds chapter) blends an element's own background layers against each other — easy to confuse, different use cases.mask-mode: alpha vs luminance matters for image-based masks: a mostly-opaque white PNG behaves very differently as an alpha mask (opacity drives visibility) vs. a luminance mask (brightness drives visibility).background-blend-mode shares its value set with mix-blend-mode; mask-position/-repeat/-size mirror the equivalent background-* utilities exactly.drop-shadow-* (next chapter) is the filter-based sibling to box-shadow, needed for non-rectangular shapes like transparent PNGs.ring-*/inset-ring-* are box-shadow-based and covered alongside outline/border there.