Dev Design LibraryOpen the library

Blur Overlay Components

Dev Design Library indexes 11 blur overlay components from 10 open-source UI libraries, with the most coming from cnblocks, Cult UI, Spectrum UI, Magic UI and React Bits. Each one links to its page with the source code, a live preview where available, the library license and the install command. Blur overlay components belong to the Effects group.

Gradual BlurReact Bits · ReactProgressively un-blurs content based on scroll or trigger creating a cinematic reveal.
Progressive BlurMagic UI · ReactThe Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below…
Edge BlurCult UI · ReactStacked backdrop-blur layers with a gradient mask for soft top or bottom screen edges
Progressive BlurLobe UI · React
LiquidbeUI · ReactGooey container (Liquid and LiquidItem): items placed inside merge into one liquid silhouette through an SVG filter.
Locked FeatureSpectrum UI · ReactA paywall over a blurred preview of the feature it is selling.
Logocloud Threecnblocks · SvelteScrolling logo cloud marquee with progressive blur edges
Progressive BlurAnimations (Svelte) · SvelteA component that creates a progressive blur effect at the top, bottom, or both edges of a container with customizable…
Frost BlurredSpaceUI · ReactStacked, masked backdrop-filter layers that frost content along an edge.
Progressive BlurSora UI · ReactA stacked-layer blur that ramps smoothly from sharp to fully blurred toward an edge, for fading content under a fixed…
Progressive Blurcnblocks · SvelteProgressive layered blur overlay component

Libraries with blur overlay components

Related categories