Progressive blur
Also called gradient blur, variable blur, or edge blur
A blur that grows stronger toward one edge, built from stacked backdrop-filter layers with gradient masks, often under headers and at the ends of lists.
type ProgressiveBlurProps = {
/** The edge where the blur is strongest. */
edge?: 'top' | 'bottom';
/** Height of the blurred band, in px. */
height?: number;
/** Blur of the last, strongest layer, in px. */
maxBlur?: number;
layers?: number;
};
export function ProgressiveBlur({
edge = 'bottom',
height = 160,
maxBlur = 16,
layers = 6
}: ProgressiveBlurProps) {
const direction = edge === 'bottom' ? 'to bottom' : 'to top';
return (
<div
aria-hidden
className='pointer-events-none absolute inset-x-0 z-10'
style={edge === 'bottom' ? { bottom: 0, height } : { top: 0, height }}
>
{Array.from({ length: layers }, (_, index) => {
// Each layer doubles the blur and fades in one step further along,
// so the steps blend into a ramp instead of a double image.
const blur = `blur(${maxBlur / 2 ** (layers - 1 - index)}px)`;
const mask = `linear-gradient(${direction}, transparent ${(index / layers) * 100}%, black ${((index + 1) / layers) * 100}%)`;
return (
<div
key={index}
className='absolute inset-0'
style={{
backdropFilter: blur,
WebkitBackdropFilter: blur,
maskImage: mask,
WebkitMaskImage: mask
}}
/>
);
})}
</div>
);
}
export function ProjectList({ projects }: { projects: string[] }) {
return (
<div className='relative h-96 w-80 overflow-hidden rounded-2xl border'>
<ul className='h-full overflow-y-auto px-4 pt-4 pb-24'>
{projects.map((name) => (
<li key={name} className='py-3 text-sm font-medium'>
{name}
</li>
))}
</ul>
<ProgressiveBlur edge='bottom' height={160} />
<button
type='button'
className='absolute bottom-4 left-1/2 z-20 -translate-x-1/2 rounded-full bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground'
>
New project
</button>
</div>
);
}Add a progressive blur to the bottom 160px of the scrolling project list: stack 6 absolutely positioned layers with backdrop-filter blur values of 0.5px, 1px, 2px, 4px, 8px, and 16px. Give each layer a mask-image linear-gradient that fades it in one-sixth further down than the previous one, so the blur grows smoothly toward the bottom edge. Make the layers pointer-events: none, float the "New project" button above them, and fall back to a plain gradient fade where backdrop-filter is not supported.
Paste into Layerwise or any AI coding tool.
What is Progressive blur?
A progressive blur goes from sharp to heavily blurred across a band, usually toward the top or bottom of a scrolling area. CSS has no single property for it, because backdrop-filter applies one radius to the whole element. The usual build stacks several layers over the edge. Each layer doubles the blur of the one before it and has a mask-image gradient that starts a little further along, so the blur builds up in steps that blend together.
You see it under sticky headers and floating toolbars, where content softens as it slides underneath, and at the bottom of lists and carousels, where the growing blur hints that more content continues. Unlike a fade mask, it keeps the content visible as soft color, which looks richer over photos.
Use 4 to 8 layers. A single masked layer cross-fades a sharp copy with a blurred one, which looks like a double exposure in the middle of the band. Each layer is a separate backdrop pass, so keep the band short and use only a few per page, especially on phones. Browsers without backdrop-filter show the content unblurred, so add a slight background tint wherever text sits on top.
Often confused with
Related terms
All termsBlur
A softening effect made with CSS filter: blur() on an element itself, or backdrop-filter: blur() on whatever shows through it from behind.
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.
Sticky header
A top bar that stays pinned to the top of the screen while the page scrolls underneath it, so navigation is always one click away.
Glassmorphism
A visual style where panels look like frosted glass: translucent, blurred backgrounds with a thin light border over colorful shapes.
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.
