Progressive blur: ramping a marquee's edges into a haze

The usual way to fade a marquee's edges is an opacity gradient mask: the content just gets transparent. A nicer version fades it into blur, so the logos seem to dissolve into a haze as they scroll off. Here it is on both ends:

One blur won't ramp

backdrop-filter: blur() is uniform. Everything behind the element gets the same blur, and it stops dead at the element's edge. There's no built-in way to say "blur a little here, a lot over there." So you fake the gradient by stacking layers.

Stack and mask

Render a handful of overlapping layers. Each one blurs a bit more than the last, and each is masked to a band that fades in and out:

const step = 1 / (layers + 1);
const blurBase = blurRange ** (1 / (layers - 1));
 
layers.map((layer) => (
  <div style={{
    backdropFilter: `blur(${blurBase ** layer}px)`,
    maskImage: `linear-gradient(to left,
      transparent ${layer * step * 100}%,
      black       ${(layer + 1) * step * 100}%,
      black       ${(layer + 2) * step * 100}%,
      transparent ${(layer + 3) * step * 100}%)`,
  }} />
));

Two details make it read as smooth. The blur grows geometrically (1, 1.7, 2.8, 4.8, 8…), which matches how blur actually looks as it deepens. And each band overlaps its neighbours by a step, so where one layer fades out the next is already fading in. The eye blends them into a single continuous ramp instead of five visible steps.

direction just swaps which way the gradient points, so you can deepen the blur toward any edge. Drop one over the left and one over the right of an overflow-hidden marquee and the ends melt away.

Worth knowing

backdrop-filter isn't free; a handful of stacked layers is fine, but it's not something to scatter across a whole page. And like all backdrop blur it needs content behind it to blur, so it lives over scrolling or busy areas, not flat ones.

Recreated from frostin-ui's ProgressiveBlur. Grab the component on the Progressive Blur page.