Mesh Gradient Components

Dev Design Library indexes 23 mesh gradient components from 12 open-source UI libraries, with the most coming from React Bits, SpaceUI, OpenSourceUI, 23rd.dev and Sona UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Mesh gradient components belong to the Backgrounds group.

• Color BendsReact Bits · ReactVibrant color bends with smooth flowing animation.
• Awesome Fluid GradientLobe UI · ReactAnimated background of soft colour gradients flowing slowly.
• Animated GradientSpell UI · ReactAnimated gradient background with presets and customizable swirl effects using WebGL.
• Liquid GradientVengeance UI · ReactShader background of a gradient flowing like liquid.
• Mesh GradientPixel Perfect · ReactSix color spots drifting on sine paths, blended by inverse-distance weights under a center swirl.
• Dark Midnight Mesh BackgroundOpenSourceUI · React
• Stripe Animated GradientBadtz UI · ReactRecreate the iconic animated gradient from Stripe with this seamless background animation component.
• Shader Gradient23rd.dev · ReactQuiet WebGL color wash for landing heroes, empty states, and marketing sections: theme-aware, optional pointer follow.
• Mesh Gradient ShaderSona UI · ReactA flowing composition of animated color spots shaped by organic distortion and vortex effects. Powered by Paper Design…
• Hero sectionArc Library · ReactThree full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph…
• Gooey BlobsSpaceUI · ReactTwo draggable blobs that merge into one liquid shape via an SVG gooey filter.
• Background Gradient AnimationAceternity UI · React
• Gradient BlindsReact Bits · ReactLayered gradient blinds with spotlight and noise distortion.
• Frost Mesh BackgroundOpenSourceUI · React
• GradientSpaceUI · ReactCreates a smoothly animating multi-color gradient background that shifts colors gently behind your page content.
• Gradient WavesReact Bits · ReactRaymarched sine waves rolling toward a soft, hazy horizon.
• Mesh GradientSpaceUI · ReactDynamic WebGL mesh gradient shader background featuring fluid swirls, configurable color stops, distortion turbulence…
• IridescenceReact Bits · ReactSlick iridescent shader with shifting waves.
• Liquid ChromeReact Bits · ReactLiquid metallic chrome shader with flowing reflective surface.
• PlasmaReact Bits · ReactOrganic plasma gradients swirl + morph with smooth turbulence.
• Plasma WaveReact Bits · ReactRaymarched plasma waves with dual-wave interference and OGL.
• PrismReact Bits · ReactRotating prism with configurable intensity, size, and colors.
• SilkReact Bits · ReactSmooth waves background with soft lighting.

Libraries with mesh gradient components

• React Bits
• SpaceUI
• OpenSourceUI
• 23rd.dev
• Sona UI

Related categories

• Tailwind CSS Mesh Gradient Components
• Backdrop Components
• Shader Background Components
• Pattern Background Components
• Gradient Background Components
• Orb Components
• Grid Background Components
• Particle Background Components
• Noise Background Components
• Wave Background Components
• Beam Background Components
• Aurora Background Components
• Spotlight Background Components
• 3D Background Components
• Meteors Components