Dev Design LibraryTailwind CSS Backdrop Components
Dev Design Library indexes 320 Tailwind CSS backdrop components from 37 open-source UI libraries, with the most coming from Pixel Perfect, OpenSourceUI, Aceternity UI, Rewamp UI and Velora UI. 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.
Showing 120 of 320, a mix from every library. Open a library to see all of its components.
Animated Grid PatternMagic UI · ReactA animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
Ai Blob WarpCult UI · ReactCircular avatar with Paper Design Warp shader; motion-safe pulse, pauses off-screen and when reduced motion is preferred- Liquid GooeyLibraries.dev · ReactLiquid UI effects for React: Morph (gooey merge, jelly shape change, contact dissolve), Move (liquid-rubber trails)…
PersonaAI Elements · ReactAn animated AI visual component powered by Rive that responds to different states like listening, thinking, and…
Background PathsKokonut UI · ReactA ribbon of lines in one color that keeps flowing at any size and parts around the cursor.
Black White BlobsCursify · React
Background PatternsUntitled UI React · React
Shader BackgroundbeUI · ReactCanvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant…
OverlayTailGrids · ReactA component for displaying content in a floating container.
Fluid OrbRare UI · ReactAn animated WebGL orb with drifting fluid shading. Supports size and color props.
Animated Wave FooterSpectrum UI · Reactcomponent for the Animated Wave Footer
Animated GradientSpell UI · ReactAnimated gradient background with presets and customizable swirl effects using WebGL.
Animated RaysVengeance UI · ReactHero with animated heading
Canvas Dot PatternToolcraft · ReactVector workspace decoration, anchored to the viewport's centered world origin.
BeamLaunch UI · React
Thinking OrbPanel UI · React NativeDotted orb saying which kind of busy an agent is.
Button 16 - Ripple SpotlightShadcn Space · ReactMouse-tracking ripple spotlight effect button
Arrow Letter BackgroundPixel Perfect · ReactA field of diagonal arrows where a red letter spells out a word one character at a time, each change sweeping across…
Aurora BackgroundOpenSourceUI · ReactSoft aurora wash with lime, mint, cyan, and blue blobs over a warm paper base — wrap any page section or hero and pass…
Animated GradientComponentry · ReactA beautiful, animated, and customizable WebGL gradient with noise capabilities.
Cta Threecnblocks · SvelteCTA section with background gradient
Animated BackgroundAnimations (Svelte) · SvelteA shared animated background that smoothly moves between selected or hovered items.
Hyperspace BackgroundBadtz UI · ReactA dynamic and customizable background component that simulates a star-filled hyperspace effect.
Liquid MetalObsidianUI · ReactShader background that looks like flowing liquid metal or chrome.
Fluid OrbNexvyn UI · ReactA WebGL fluid orb in muted/neutral design tokens with sphere normals, fBm noise, and audio-reactive pulse.
Elastic Line GridRewamp UI · ReactBackground grid of lines that bend elastically near the pointer and spring back.
ASCII Fluid23rd.dev · ReactMouse-trail WebGL fluid background quantized to a clean ASCII brightness ramp - zero deps, theme-aware.
Dot Orbit ShaderSona UI · ReactAnimated multi-color dots orbiting their cell centers. Supports up to 10 colors with controls for size, spread, and…
Particlessv-efferd · SvelteBackground of floating particles.
Dot GridUI Lab · ReactDots swell and part around your cursor, and a click sends a shockwave.
Ambient backgroundCojeev UI · ReactAdds a quiet animated composition around content, with decorative shapes kept behind a readable surface.
Announcement barFLX UI · ReactFull-width gradient promo with a New tag and arrow.
Aurora BackgroundVelora UI · ReactVelora's signature drifting aurora gradient backdrop.
Gooey BlobsSpaceUI · ReactTwo draggable blobs that merge into one liquid shape via an SVG gooey filter.
AI OrbSkecher UI · ReactAn interactive Three.js orb for AI assistants, voice interfaces, and ambient status surfaces.
Cosmic BackgroundReactFrame · ReactA canvas-powered animated night-sky background, rotating star rings, a drifting star field, a breathing cone light and…
Dotted Glow BackgroundAceternity UI · ReactCanvas-based dotted background that randomly glows and dims.
Dither FieldMagic UI · ReactAn animated WebGL2 background of Bayer-dithered square dots. The dots follow a light pattern, an image or a video…
Bg Animate ButtonCult UI · ReactButton component with animated background effects and gradient transitions
Beams BackgroundKokonut UI · ReactAnimated background of drifting light beams rendered on an HTML canvas with configurable intensity. Built with React…
Blob CursorCursify · React
Voice OrbbeUI · ReactA liquid sphere that moves with your voice.
Floating Particle FooterSpectrum UI · Reactcomponent for the Floating Particle Footer
Light RaysSpell UI · ReactAnimated light rays effect using WebGL shaders.
Aurora HeroVengeance UI · ReactFluted glass dynamic hero with interactive switch
Layout LinesLaunch UI · React
Button 17 - Blob FillShadcn Space · ReactCircle blob expands from bottom center on hover to fill the button
Aurora CurtainPixel Perfect · ReactDrifting ribbons of green and violet light over a deep night sky.
Halftone Pop BackgroundOpenSourceUI · ReactPop-art background of halftone dots over a gradient.
Aurora FlowComponentry · ReactProcedural atmospheric hero background with layered flowing color, diffused aurora light, and subtle interaction.
Feature Twelvecnblocks · SvelteFeature grid with gradient backgrounds
Animated Grid PatternAnimations (Svelte) · SvelteAn animated grid pattern component that creates a dynamic background with moving squares that fade in and out.
Mouse WaveBadtz UI · ReactAn interactive and customizable component that creates a dynamic wave effect responding to mouse movements, perfect…
V PrismObsidianUI · React
Glow OrbNexvyn UI · ReactA WebGL fbm-noise glow orb with state-driven colors, volume-responsive scale and glow, idle and connecting pulse…
Fluid Morph OrbRewamp UI · ReactAnimated orb that continuously changes shape like a fluid, shader based.
Dither Scan23rd.dev · ReactAn image that starts as a 1-bit ordered dither. A diagonal scan line sweeps it a set number of times, and each pass…
Mesh Gradient ShaderSona UI · ReactA flowing composition of animated color spots shaped by organic distortion and vortex effects. Powered by Paper Design…
Floating pathssv-efferd · Svelte
Magnet LinesUI Lab · ReactLines turn toward your cursor like iron filings near a magnet.
Contour fieldCojeev UI · ReactOriginal topographic lines on the inherited paper surface, with a bounded GPU renderer.
Hero 01FLX UI · ReactA centered serif hero with a soft gradient wash, pill CTA, and a floating integration cloud.
Sign-up cardVelora UI · ReactCentered sign-up card over a grid and light beams, with live password rules, terms and social sign-up.
GradientSpaceUI · ReactCreates a smoothly animating multi-color gradient background that shifts colors gently behind your page content.
Noise BackgroundReactFrame · ReactA canvas background with animated film-grain noise, soft color blob gradients, 7 built-in themes (or fully custom…
Aurora BackgroundAceternity UI · React
Dot PatternMagic UI · ReactA background dot pattern made with SVGs, fully customizable using Tailwind CSS.
Bg Animated Fractal Dot GridCult UI · ReactBackground animated fractal dot grid with performance optimization and responsive design
Caustics BackgroundKokonut UI · ReactA hero on the floor of a pool. Light ripples across it, clicks drop rings that bend the light, and the headline's…
Dot ParticlesCursify · React
Fluid Morph BgVengeance UI · ReactOrganic fluid shape morphing animation
Code Block 03 - Custom BackgroundShadcn Space · ReactCode block with custom background and line numbers
Bayer Sunset BackgroundPixel Perfect · ReactA 1-bit retro sunset: a banded sun over a scrolling perspective grid, rendered in two colours with a Bayer ordered…
Arc Bands BackgroundOpenSourceUI · React
Closing PlasmaComponentry · ReactPlasma field tailored for footer and CTA sections with premium atmospheric motion.
Hero Eightcnblocks · SvelteHero with video background and overlay
Dither ShaderAnimations (Svelte) · SvelteA canvas-based component that applies dithering effects to images with customizable patterns and color modes.
ParticlesBadtz UI · ReactA versatile and performant component for creating engaging, animated content displays with smooth infinite scrolling…
Halftone Dot CursorRewamp UI · ReactRecreation of Recording 2026-09-17 213845.mp4: An interactive halftone dot matrix cursor that expands and blooms into…
Live Orb23rd.dev · ReactAn evenly lit sphere with two capsule eyes that follow the pointer: white, black, webgl, and custom variants.
Grid fillersv-efferd · Svelte
Contours backgroundCojeev UI · ReactNested organic contour lines with generous space between islands.
Background BeamsVelora UI · ReactLight beams flowing along curved paths behind content.
Interactive Grid HeroSpaceUI · ReactInteractive proximity-reactive square cell grid canvas that softly rounds and insets cells within a focused radius…
Background BeamsAceternity UI · React
Flickering GridMagic UI · ReactA flickering grid background made with SVGs, fully customizable using Tailwind CSS.
Bg Animated GradientCult UI · ReactAnimated gradient background component with customizable color transitions
Drape BackgroundKokonut UI · ReactA pleated curtain in a breeze that you can push and pull, built with React, WebGL and a cloth simulation.
Spotlight CursorCursify · React
Highlight GridVengeance UI · ReactGrid with a colored highlight that glides behind the hovered cell
Blob SpherePixel Perfect · ReactA sphere displaced by 3D noise in the vertex shader — drag to spin.
Cherry Petal BackgroundOpenSourceUI · React
Dither GradientComponentry · ReactGradient background with dithering noise.
Hero Sevencnblocks · SvelteHero with gradient background and stats
Dot PatternAnimations (Svelte) · SvelteA customizable dot pattern background component with optional glow animations and mask effects.
Pixel DistorsionBadtz UI · ReactAn interactive and customizable shader effect that distorts pixels dynamically based on mouse interactions, perfect…
Liquid Cursor GradientRewamp UI · ReactGradient background that flows like liquid following the pointer.
Radiant Lines23rd.dev · ReactA hyperspace starfield background: colored streaks radiate from the center, with warp speed driven by scroll velocity.
Grid patternsv-efferd · Svelte
Depth backgroundCojeev UI · ReactLayered pollen, contours and orbital shapes with perspective, native-scroll depth and pointer response.
Background BoxesVelora UI · ReactAn isometric grid whose cells light up in brand tints under the pointer.
Liquid Metal BorderSpaceUI · ReactLiquid metal shader as a border wrap. Put any registry component inside.
Background Beams With CollisionAceternity UI · React
Floating 3D ParticlesMagic UI · ReactA canvas-based pseudo-3D particle field with perspective projection, continuous rotation and buoyant drift.
Bg Image TextureCult UI · ReactBackground texture component with multiple texture variants and customizable opacity
WindKokonut UI · ReactStreamlines that part around the cursor, swirl in its wake and scatter on click, built with React and Canvas.
Interactive ParticlesVengeance UI · ReactImage-sampled particles that scatter around the cursor
Braille Terrain BackgroundPixel Perfect · ReactA slowly drifting terrain drawn in Unicode braille, so every character carries its own 2×4 dither cell.
Coral Glow BackgroundOpenSourceUI · React
Dither Prism HeroComponentry · ReactStunning WebGL hero with advanced dithering, prismatic refraction, holographic iridescence, and center-focused energy.
Flickering GridAnimations (Svelte) · SvelteAn animated flickering grid pattern component that creates a dynamic canvas-based background with randomly flickering…
Pulse ShaderBadtz UI · ReactAn interactive and customizable shader effect that creates a dynamic wave in response to hover interactions, perfect…
Marbled Fluid OrbRewamp UI · ReactAnimated orb with swirling marbled colours, shader based.
Shader Anime Fire23rd.dev · ReactCel-shaded WebGL flames for landing heroes: tongues lick up from the bottom in flat bands of heat, and the fire…
Dither sculptureCojeev UI · ReactDepth-tested sculptural forms printed as ordered dots, halftone, error diffusion or stipple.
Newsletter sign-upVelora UI · ReactNewsletter card over a glowing dot grid with a labelled email field, subscriber avatars and a privacy note.
Mesh GradientSpaceUI · ReactDynamic WebGL mesh gradient shader background featuring fluid swirls, configurable color stops, distortion turbulence…
Background BoxesAceternity UI · React
Glyph MatrixMagic UI · ReactAn animated grid of subtly shifting glyphs with fade effect and theme support.
Bg MediaCult UI · ReactBackground media component with video/image support and overlay effects
Libraries with Tailwind CSS backdrop components
Related categories
- Backdrop Components
- React Backdrop Components
- Svelte Backdrop Components
- Animated Backdrop Components
- shadcn/ui Backdrop Components
- Tailwind CSS Pattern Background Components
- Tailwind CSS Shader Background Components
- Tailwind CSS Gradient Background Components
- Tailwind CSS Particle Background Components
- Tailwind CSS Grid Background Components
- Tailwind CSS Orb Components
- Tailwind CSS Noise Background Components
- Tailwind CSS Beam Background Components
- Tailwind CSS Mesh Gradient Components
- Tailwind CSS Spotlight Background Components
- Tailwind CSS Aurora Background Components
- Tailwind CSS Wave Background Components