Dev Design LibraryTailwind CSS Shader Background Components
Dev Design Library indexes 66 Tailwind CSS shader background components from 17 open-source UI libraries, with the most coming from Rewamp UI, Componentry, Cojeev UI, Vengeance UI and Cult 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. Shader background components belong to the Backgrounds group.
Dither FieldMagic UI · ReactAn animated WebGL2 background of Bayer-dithered square dots. The dots follow a light pattern, an image or a video…
Hero Color PanelCult UI · ReactSplit-layout hero section with responsive ColorPanels shader visuals, CTA, and tech stack badges
WindKokonut UI · ReactStreamlines that part around the cursor, swirl in its wake and scatter on click, built with React and Canvas.
Shader BackgroundbeUI · ReactCanvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant…
Light RaysSpell UI · ReactAnimated light rays effect using WebGL shaders.
Fluid Morph BgVengeance UI · ReactOrganic fluid shape morphing animation
Animated GradientComponentry · ReactA beautiful, animated, and customizable WebGL gradient with noise capabilities.
Dither ShaderAnimations (Svelte) · SvelteA canvas-based component that applies dithering effects to images with customizable patterns and color modes.
Mouse WaveBadtz UI · ReactAn interactive and customizable component that creates a dynamic wave effect responding to mouse movements, perfect…
Liquid MetalObsidianUI · ReactShader background that looks like flowing liquid metal or chrome.
Fluid Morph OrbRewamp UI · ReactAnimated orb that continuously changes shape like a fluid, 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…
Dot Orbit ShaderSona UI · ReactAnimated multi-color dots orbiting their cell centers. Supports up to 10 colors with controls for size, spread, and…
Contour fieldCojeev UI · ReactOriginal topographic lines on the inherited paper surface, with a bounded GPU renderer.
VortexVelora UI · ReactBrand-tinted particles spiralling into the centre, leaving soft fading trails.
Liquid Metal BorderSpaceUI · ReactLiquid metal shader as a border wrap. Put any registry component inside.
Canvas Reveal EffectAceternity UI · React
Hero DitheringCult UI · ReactSplit-layout hero section with responsive dithering shader visuals, CTA, and tech stack badges
Liquid ButtonVengeance UI · ReactLiving organic fluid ink button with cursor displacement tracking and tactile shockwave recoil
Aurora FlowComponentry · ReactProcedural atmospheric hero background with layered flowing color, diffused aurora light, and subtle interaction.
Pixel DistorsionBadtz UI · ReactAn interactive and customizable shader effect that distorts pixels dynamically based on mouse interactions, perfect…
V PrismObsidianUI · React
Marbled Fluid OrbRewamp UI · ReactAnimated orb with swirling marbled colours, shader based.
Shader Fire23rd.dev · ReactSparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.
Mesh Gradient ShaderSona UI · ReactA flowing composition of animated color spots shaped by organic distortion and vortex effects. Powered by Paper Design…
Elastic MeshCojeev UI · ReactA triangulated printed sheet stretches toward the pointer and springs home.
Paper ShaderSpaceUI · ReactPaper Shaders WebGL2 canvas. Pass a fragment shader and uniforms; the mount compiles, resizes, and ticks time.
Cloud ShaderAceternity UI · React
Hero HeatmapCult UI · ReactSplit-layout hero section with responsive Heatmap shader visuals, CTA, and tech stack badges
Liquid GradientVengeance UI · ReactShader background of a gradient flowing like liquid.
Closing PlasmaComponentry · ReactPlasma field tailored for footer and CTA sections with premium atmospheric motion.
Pulse ShaderBadtz UI · ReactAn interactive and customizable shader effect that creates a dynamic wave in response to hover interactions, perfect…
Ambient Glow OrbsRewamp UI · React
Shader Gradient23rd.dev · ReactQuiet WebGL color wash for landing heroes, empty states, and marketing sections: theme-aware, optional pointer follow.
Flow sculptureCojeev UI · ReactA rendered form responds to pointer strokes through a fluid distortion field.
Dither ShaderAceternity UI · React
Hero Liquid MetalCult UI · ReactSplit-layout hero section with responsive LiquidMetal shader visuals, CTA, and tech stack badges
Liquid MetalVengeance UI · ReactMetallic fluid shader effect
Dither Prism HeroComponentry · ReactStunning WebGL hero with advanced dithering, prismatic refraction, holographic iridescence, and center-focused energy.
Gradient Wave BackgroundRewamp UI · React
Shader Metal23rd.dev · ReactLiquid chrome, gold, or copper ribbons twisting through a studio light rig: transparent WebGL, theme-aware, with a key…
Magic RingsCojeev UI · ReactOpen concentric rings expand in Cojeev colors and respond to pointer position.
VortexAceternity UI · React
Hero Static Radial GradientCult UI · ReactSplit-layout hero section with responsive StaticRadialGradient shader visuals, CTA, and tech stack badges
Liquid OceanVengeance UI · ReactAnimated ocean wave field
Liquid ChromeComponentry · ReactPremium fluid liquid metal shader background effect.
Refracted BeamsRewamp UI · React
Shader Sky23rd.dev · ReactWebGL sky for landing heroes: clear blue with drifting clouds in light, storm gray in dark, optional window-glass film.
Meta BallsCojeev UI · ReactMoving scalar-field bodies merge and separate through liquid contours.
Shader Lens BlurCult UI · ReactWebGL shader component with lens blur effects and mouse interaction
Liquid TextVengeance UI · ReactFluid displacement text effect
Prism GradientComponentry · ReactA theme-aware WebGL prism field with liquid checkered motion, electric-blue refraction, and tactile grain.
Silk Waves BackgroundRewamp UI · React
Pigment fieldCojeev UI · ReactAn original GPU pigment wash using the current Cojeev palette.
Ripple Displacement SliderVengeance UI · ReactInteractive full-screen WebGL slider with fluid ripple displacement transitions
Ripple TransitionComponentry · ReactWebGL image transitions with noisy refractive waves, chromatic edges, glow, and click-triggered ripple origins.
Sine RibbonsRewamp UI · React
Portal FieldCojeev UI · ReactAn organically warped luminous halo with a soft chromatic fringe behind real content.
Silk AuroraComponentry · ReactPremium WebGL hero background with satin-dark aurora ribbons, pearlescent highlights, fine grain, and cursor depth.
Singularity Flare BackgroundRewamp UI · React
Ripple DistortionCojeev UI · ReactPointer impulses send expanding waves through a textured print.
Spectral RibbonComponentry · ReactA soft spectral light ribbon on pure black — slow liquid motion and rainbow fringe.
Soft AuroraRewamp UI · React
StrandsCojeev UI · ReactA bundle of colored ribbons moves through a bounded sine field.
Webgl LiquidComponentry · ReactCinematic liquid shader hero with premium gradients, configurable reveal timing, and advanced flow controls.
Water Caustics BackgroundRewamp UI · React
Libraries with Tailwind CSS shader background components
Related categories
- Shader Background Components
- React Shader Background Components
- Animated Shader Background Components
- shadcn/ui Shader Background Components
- Tailwind CSS Backdrop Components
- Tailwind CSS Pattern 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