Variable Blur Scrim
A scrim whose blur ramps instead of switching on — stacked backdrop-filter layers at doubling radii with overlapping masks.
DOM + CSS0 deps1 file · 5 KB TSX
Props
"use client";
import type { ReactNode } from "react";
/**
* A scrim whose blur RAMPS rather than switches on.
*
* ONE BLURRED LAYER WITH A GRADIENT MASK IS NOT A PROGRESSIVE BLUR, and this
* is the substitution almost every implementation makes. Masking a single
* uniformly-blurred layer fades that blur IN — so through the half-transparent
* part you see the sharp original showing through its own blur as a ghost. The
* ramp has to come from a STACK of layers at increasing radii, each masked to
* its own band, so that what is blurred twice was already blurred once.
*
* THE RADII DOUBLE, AND THE RAMP HAS A DIRECTION. Perceived blur is roughly
* logarithmic, so evenly spaced radii read as a sudden jump near the sharp end
* and then barely change. The orientation matters just as much: the masks are
* "to top", where 0% is the BOTTOM edge, so the radius must FALL as the band
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this pattern
Text over photography usually gets a flat dark slab underneath it, which solves legibility by throwing away the image. A progressive blur solves it by degrading the picture gradually instead, and the reason so few are convincing is that almost everyone builds the wrong thing: a single uniformly blurred layer faded in with a gradient mask. That fades the blur's OPACITY rather than its radius, so through the half-transparent region the sharp original shows through its own blur as a ghost — visible immediately once you know to look for it. A real ramp is a stack of layers at increasing radii, each masked to its own band, so that whatever gets blurred twice was already blurred once; because backdrop-filter reads everything painted behind it, including the shallower layers, the radii compound rather than compete. Two details finish it. The radii double rather than stepping evenly, because perceived blur is roughly logarithmic and a linear ramp reads as a jump near the sharp end followed by almost no change. And each band's mask spans about three band-widths with four stops, so it overlaps its neighbours — abutting masks leave a hairline seam at every boundary, and a stack of faint horizontal lines is the clearest giveaway that a scrim was constructed rather than photographed. The darkening stays in one separate gradient, since folding it into the layers multiplies it by the layer count and crushes the bottom edge to black.
Curator’s note
Fade one blurred layer in with a gradient mask and you can see the sharp original through its own blur. The ramp has to be a stack, not an opacity.
