Mask
Also called CSS mask, mask-image, or fade mask
A CSS technique that uses an image or gradient to set how visible each part of an element is, often used to fade edges softly.
const messages = [
{ from: 'Ana', text: 'Did the new build go out?' },
{ from: 'You', text: 'Yes, about ten minutes ago.' },
{ from: 'Ana', text: 'The checkout page looks much faster.' },
{
from: 'You',
text: 'Images load lazily now, and the bundle is 40% smaller.'
},
{ from: 'Ana', text: 'Nice. Any errors since the deploy?' },
{ from: 'You', text: 'None so far. I will keep an eye on it tonight.' },
{ from: 'Ana', text: 'Thanks! Let me know if anything comes up.' }
];
export function MessageThread() {
return (
// The mask is opaque in the middle and transparent at the ends, so messages
// fade out over the top and bottom 48px instead of being cut off.
<ul className='flex h-80 w-80 flex-col gap-2 overflow-y-auto py-12 [mask-image:linear-gradient(to_bottom,transparent,black_48px,black_calc(100%-48px),transparent)]'>
{messages.map((message, index) => (
<li
key={index}
className={`max-w-[75%] rounded-2xl px-3 py-2 text-sm ${message.from === 'You' ? 'self-end bg-blue-600 text-white' : 'self-start bg-muted'}`}
>
{message.text}
</li>
))}
</ul>
);
}Fade the top and bottom 48px of the scrolling message list with mask-image: linear-gradient(to bottom, transparent, black 48px, black calc(100% - 48px), transparent), so messages dissolve at the edges instead of being cut off. Include the -webkit-mask-image version for older browsers.
Paste into Layerwise or any AI coding tool.
Mask explained
A mask works like a stencil with shades of transparency. With mask-image, each pixel of the mask controls the element underneath: where the mask is opaque, the element shows; where it is transparent, the element disappears; in between, it fades. A linear-gradient() from black to transparent is the most common mask.
Use it to fade the edges of a scrolling list, carousel, or logo marquee so items dissolve instead of being cut off, which also hints that more content continues. Masks also cut text and icons out of photos and gradients, and they accept SVG and PNG images for any soft-edged shape.
Current browsers support the unprefixed mask-image. Keep -webkit-mask-image alongside it if you support older Safari and Chrome versions, and remember that a mask hides content visually only, so the full content still needs to make sense to screen readers.
Often confused with
- Clip-path
- Clip-path cuts a hard-edged geometric shape. A mask reads transparency from an image or gradient, so it can fade.
Related terms
All termsClip-path
A CSS property that cuts an element to a shape, such as a circle, an inset rectangle, or a polygon, and hides everything outside it.
Marquee
A strip of logos or text that scrolls sideways in an endless loop, often used for "trusted by" rows and announcements.
Gradient text
Text filled with a color gradient instead of a solid color, made by painting a gradient background and clipping it to the shape of the letters.
Grid background
A decorative background of thin grid lines, dots, or stripes, often faded toward the edges, used behind hero sections and product shots.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.