Progressive Blur

Progressive blur softens the edge of a React scroll area with layered backdrop filters. Use it to suggest that a list continues below the visible panel while keeping the centre clear.

Better with your agent

Give your agent taste.

The best way to use Rendyn is through MCP. Let your agent find the right component, compare previews and bring the source into your project.

All components are free. Sign up only to connect MCP.

Connect to MCP for free

Interactive exampleReact Tailwind CSS

Practical React example

A compact activity feed is a useful fit: the list scrolls inside a fixed-height panel, while the blur stays attached to the bottom of the panel. Keep important actions outside the blurred edge.

Before you copy and paste

Add the component and its cn utility from the Code tab, then adapt the import path. This example uses a native scroll area with React and Tailwind CSS; it does not require a separate scroll-area component.

Use the Code tab for the component files and installation instructions, then adapt the imports in this example to your project.

Keep the blur at the edge of an activity feed

import { ProgressiveBlur } from "@/components/magicui/progressive-blur";

const events = ["Draft created", "Review requested", "Changes saved", "Review approved"];

export function ActivityFeed() {
  return (
    <section aria-label="Project activity" className="relative rounded-xl border">
      <div
        role="region"
        aria-label="Recent activity"
        tabIndex={0}
        className="h-56 overflow-y-auto p-4 pb-16"
      >
        <ol className="space-y-6">
          {events.map((event) => <li key={event}>{event}</li>)}
        </ol>
      </div>
      <ProgressiveBlur position="bottom" height="25%" />
    </section>
  );
}

The relative wrapper anchors the absolute overlay. The inner region handles scrolling and can receive keyboard focus. Extra bottom padding lets the final item scroll above the blur.

Customization

position: Choose top, bottom or both. In the imported source, both fills the entire wrapper and ignores height.
height: A CSS length such as 25% or 64px sets the depth of a single-edge overlay. Keep it shallow enough for the list to remain readable.
blurLevels: The default is eight values: 0.5, 1, 2, 4, 8, 16, 32 and 64 pixels. Keep eight non-negative values when tuning intensity: the mask stops are spaced in eighths. Fewer than two values cannot render safely.

Integration notes

The overlay uses pointer-events-none, so clicks pass through it. Blurring content does not hide it from assistive technology or protect sensitive information.
Test backdrop-filter and mask-image in your supported browsers. Provide a subtle gradient fallback if the effect is unavailable, and keep the list usable without the effect.
Place content beside the overlay as shown. Although the imported props declare children, this version does not render them. The effect itself has no animation or automatic scroll-position detection.

Component source: Magic UI documentation . These examples describe the version imported into Rendyn. Upstream APIs may have changed; retain the source licence notices when adapting the code.