Gradient mask

A mask hides parts of an element based on another image, and it reads that image one of two ways. An alpha mask goes by the mask's transparency: opaque pixels keep what is underneath, transparent ones hide it, and the color does not matter. A luminance mask goes by brightness instead, where white keeps and black deletes. CSS masking uses alpha by default, so black is a keeper there unless you ask for 'mask-mode: luminance'. Feed either one a gradient instead of a shape and the element dissolves smoothly along a direction. On the web that is one line: mask-image: linear-gradient(...), with a radial or conic gradient when you want a soft blob or a wedge instead of a straight fade.

Reach for it when content runs past a boundary and a hard cut looks cheap: scroll containers fading under a sticky header, marquees fading at both ends, long screenshots melting into the page, images that need to blend into a section rather than sit in a box.

The mistake almost everyone makes first is faking it with an overlaid div that gradients from the background color to transparent. That works until the background changes: dark mode, a photo behind it, a colored section, and suddenly there is a grey smear floating over the page. A real mask fades to actual transparency, so it survives any backdrop. Keep the -webkit-mask-image twin around for older Safari, and remember masked elements get their own compositing layer, so do not mask a thousand rows at once.