Masks

Fade out element edges with CSS mask-image. Apply mask= to images, text containers, carousels, and backgrounds — zero JavaScript.

Edge fades

<div gradient="brand" mask="fade-bottom">…</div>

<div gradient="fire" mask="fade-top">…</div>

<!-- Scrollable row that fades at edges -->
<div mask="fade-x" style="overflow:hidden;">
  <div layout="row" gap="md" style="flex-wrap:nowrap;">
    <div>…</div>
  </div>
</div>

Vignette & circle

<div gradient="ocean" mask="vignette">…</div>
<img mask="circle" style="border-radius:50%" />

<div mask="spotlight">
  <h2>Spotlight mask</h2>
</div>

<!-- Move spotlight with custom property -->
<div mask="spotlight" style="--aura-mask-center:25% 40%">…</div>

Customisation tokens

<!-- All masks are customisable via CSS custom properties -->
--aura-mask-start:  60%    /* solid region end */
--aura-mask-end:    100%   /* fully transparent at */
--aura-mask-edge:   15%    /* fade-x/y edge width */
--aura-mask-center: 50% 50% /* spotlight focal point */

<!-- Example: very sharp fade -->
<div mask="fade-bottom" style="--aura-mask-start:80%;--aura-mask-end:95%">…</div>

All values

mask="fade-bottom|fade-top|fade-left|fade-right"
mask="fade-x|fade-y"
mask="vignette|circle|spotlight"