1. Home
  2. Motion
  3. ShaderGradient
  4. Alternatives

ShaderGradient alternatives

39 sites that do what ShaderGradient does, side by side. All hand-picked Motion kits.

ShaderGradient screenshot 1
Comparing againstShaderGradient

Flowing 3D gradient backgrounds you tune in the browser, then export to React, Framer or Figma.

Open page →
SiteGet codePriceSaves
ShaderGradientThis onenpmFree
React BitsReact, Tailwind CSS, Motion, GSAP, Three.jsRegistryFree
SSGOIReact, Svelte, Vue, Solid, Angular, QwiknpmFree
VFX-JSJavaScript, React, WebGLnpmFree
Motion ExamplesReact, Vue, JavaScript, MotionnpmFree
Goey ToastReact, MotionnpmFree
Paper ShadersReact, JavaScript, WebGLnpmFree
ShadersReact, Vue, Svelte, Solid, WebGPUnpmFree
Libraries.devReact, WebGLnpmFree
AmicroReact, MotionnpmFree
Hyperiux VaultReact, Next.js, GSAP, MotionRegistryFree
Unlumen UIReact, Tailwind CSS, Motion, shadcn/uiCopyFree
AnimataReact, Tailwind CSS, MotionRegistryFree
useLayoutsReact, Tailwind CSS, Motion, shadcn/uiRegistryFree
Motion PrimitivesReact, Tailwind CSS, MotionRegistryFree
Pace UIReact, Next.js, Motion, GSAP, shadcn/uiCopyFree
UI TripleDReact, Tailwind CSS, Motion, shadcn/ui, Base UICopyFree
Vengeance UIReact, Tailwind CSS, Motion, shadcn/uiRegistryFree
Eldora UIReact, Tailwind CSS, Motion, shadcn/uiCopyFree
LuxeReact, Tailwind CSS, Motion, Radix UIRegistryFree
beUIReact, Tailwind CSS, Motion, shadcn/uiRegistryFree
MotiqReact, Tailwind CSS, Motion, shadcn/uiRegistryFree
Serenity UIReact, Canvas, WebGL, shadcn/uiRegistryFree
Rare UIReact, Tailwind CSS, Motion, shadcn/uiRegistryFree
Skiper UIReact, Tailwind CSS, Motion, shadcn/uiRegistryFree
Arc UIReact, Tailwind CSS, Motion, shadcn/uiRegistryFree
Cult UIReact, Tailwind CSS, Motion, shadcn/uiRegistryFree
Spell UIReact, Tailwind CSS, Motion, shadcn/uiRegistryFree
Transitions.devCSS, ReactCopyFree
Canvas UIReact, WebGLRegistryFree
interior.devReactRegistryFree
Animate UIReact, Motion, shadcn/uiRegistryFree
Fancy ComponentsReact, MotionRegistryFree
Smooth UIReact, Motion, shadcn/uiRegistryFree
Svelte AnimationsSvelte, Tailwind CSS, motion-svnpmFree
NeatJavaScript, WebGLnpmFree
Vue BitsVue, Tailwind CSS, GSAPCopyFree
Motion CoreSvelte, GSAP, OGLRegistryFree
Inspira UIVue, Nuxt, Tailwind CSS, motion-vCopyFree
OsmoHTML, CSS, GSAP, WebflowPaidHas paid plans
About Motion libraries

Motion libraries give you animated pieces — text reveals, moving backgrounds, cursor effects — that you drop into a page. Most are built for React with Tailwind CSS and Framer Motion. Pick one by how much code you want to own: some you copy file by file, some you install as a package.

Good for
  • Landing page hero sections
  • Animated backgrounds
  • Small interactions on buttons and cards
SponsoredAdvertise →
WapopoOne sentence in, a comic outSlot 2Your product hereSlot 3Your product hereSlot 4Your product here