design-infraReport a problem or share feedback← Catalog
Progressive Blur
freemagicui/progressive-blur
The Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.
$
npx shadcn@latest add @magicui/progressive-blur- Source
- Magic UI
- Kind
- component
- Categories
- scroll-effect
- Use as
- wrapper — wraps your existing element
- Applies to
- imagecarouselcard
- Motion
- not tagged (static or unknown)
- Licence
- MIT (magicuidesign/magicui). Magic UI Pro templates are a separate paid product — not catalogued.
- Live demo
- magicui.design
- Docs
- magicui.design
Similar
Compare all 4 →- Smooth Scroll Slideroriginkit/smooth-scroll-slider
- Progressive Blursmoothui/progressive-blur♥ The user wants more interesting live homepage examples and shared this surface effect. Show it over a scrollable UI with readable controls outside the blur; it is a static surface effect, not a loading animation. — Layered CSS backdrop blur for fading scroll-container edges and decorative surfaces. It is not a loader or a continuous animation. Keep text, focus targets and controls outside the strongest blur; the decorative overlay must not intercept interaction. Hosted demo includes a real scroll container and blur controls.
- Progressive Blurmotion-primitives/progressive-blurLayered backdrop-filter blur gradient for edges of scroll areas/images. Colourless; backdrop-filter costs GPU — keep blurLayers low.