Tailwind CSS Blur Overlay Components

Dev Design Library indexes 9 Tailwind CSS blur overlay components from 8 open-source UI libraries, with the most coming from cnblocks, Cult UI, Spectrum UI, Magic UI and beUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Blur overlay components belong to the Effects group.

• 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
• 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 Tailwind CSS blur overlay components

• cnblocks
• Cult UI
• Spectrum UI
• Magic UI
• beUI

Related categories

• Blur Overlay Components
• React Blur Overlay Components
• Animated Blur Overlay Components
• Tailwind CSS Effect Components
• Tailwind CSS Marquee Components
• Tailwind CSS Transition Components
• Tailwind CSS Cursor Effect Components
• Tailwind CSS Image Effect Components
• Tailwind CSS Mask Effect Components
• Tailwind CSS Reveal Wrapper Components
• Tailwind CSS Border Effect Components
• Tailwind CSS Glow Effect Components
• Tailwind CSS Tilt Effect Components
• Tailwind CSS Spotlight Effect Components
• Tailwind CSS Confetti Components