Gradient Background
53 resources in the index ship this component, best first. Group: Motion & Effects.
Also called · aurora · mesh gradient · animated gradient · noise · grain · gradient blob
Ships it
53- daisyUI · 68 pure-CSS Tailwind components as semantic class names, MIT, with 35 built-in themes
- Grabient · Cosine-gradient generator; CSS/SVG/PNG export and a real llms.txt
- HyperFrames · Apache-2.0 framework that renders HTML compositions to deterministic MP4, built for agents
- Paper Shaders · 30 zero-dependency canvas shaders as React components or vanilla JS, Apache-2.0
- Radiant · Zero-dependency generative shaders as single HTML files, embedded by iframe
- React Bits · 234 copy-paste animated React components: text effects, cursors, WebGL backgrounds
- React Bits Pro · 703 paid React items in one license-gated shadcn registry: 134 animated components, 538 blocks, 11 templates and an Agent Kit
- remocn · 282 Remotion components for product-demo video, installed by the shadcn CLI
- Shader Lab · Browser shader compositor with a WebGPU React runtime for export
- UI TripleD · 282-item shadcn registry of motion components, sections and full pages
- 21st.dev · Community shadcn registry: 12,000+ React components, 48 templates, 48 themes
- Aceternity UI · 132 motion-heavy React sections; 329 registry items; 17 paid templates
- Aceternity UI on 21st.dev · All 84 Aceternity components browsable side by side with copy-prompt and CLI install
- Animista · Pick-and-tweak CSS keyframe animations; copy only the ones you use, BSD-licensed
- Annnimate · 80 copy-paste GSAP animation components for React, Vue and vanilla
- beUI · 76 React motion components and AI agent UI, installed through a shadcn registry
- beUI · 106-item Motion + Tailwind registry for React, shadcn-compatible
- Componentry · 62 animated React components plus 3 blocks, installed via the shadcn CLI
- Cult UI · 82 free design-engineer components plus 10 paid full-stack AI starters
- Grainient Shader Editor · Real-time shader gradient editor; customize and embed animated backgrounds
- Haikei · 15 browser generators that export blob, wave and gradient backgrounds as SVG or PNG
- HyperFrames Docs & Catalog · 515-page HyperFrames manual with a 375-block motion catalog and an llms.txt index
- Kokonut UI · 45 animated shadcn-CLI components for landing pages, plus 7 paid templates
- Magic UI · 150+ animated shadcn-compatible React components for landing pages
- Pattern Craft · 257 copy-paste CSS background patterns and gradients, MIT licensed
- Radiant Shader Gallery · Browsable gallery of 87 free WebGL and Canvas 2D background effects
- Shadcnblocks · 1,837 paid shadcn blocks and 19 Next.js and Astro templates, lifetime license
- Tamagui · Universal React styling engine, optimizing compiler and ~48 components for web and native
- termcn · Terminal UI components for React, installed with the shadcn CLI, on Ink and OpenTUI
- ThreeUI · Three.js hero components, shaders and landing-page templates with a Pro-gated remote MCP server — Community free, Pro $99/yr or $199 lifetime
- Unicorn Studio · Browser tool that builds WebGL scenes and exports embeds for Framer, Webflow, or React
- unlumen UI · Freemium shadcn registry of Motion-driven React components
- vgpu · Vercel Labs WebGPU library where one WGSL shader renders in the browser, headless in Node.js and as a CI snapshot test
- aengel.io Laboratory · 19 WebGPU and TSL experiments — compute fluids, raymarching, refraction — reference only, no source code
- Animate UI · 73 motion-first React components shipped as a shadcn registry
- Arlan's Vault · 18 web UI effects, each with a one-line spec, a live demo, and a copyable prompt
- Dither Kit · Dithered React charts, avatars and gradients on one canvas engine
- Easing Gradients · Fixes the hard edge on a CSS gradient by easing the colour mix, with an editor plus PostCSS and Sketch plugins
- Eldora UI · 40 animated React components plus 16 landing-page blocks, shadcn-installable
- Fancy Components · An MIT React library of microinteractions at 3,101 stars, organised by physics, text and image effect rather than by widget
- 10 Framer Shader Presets · Ten copy-ready Framer shader configs with exact color, seed, speed, and noise values
- Hypercolor · 87 named Tailwind gradients plus mesh, grainy and world-flag generators
- MVPBlocks · 100+ copy-paste Next.js + Tailwind marketing and dashboard blocks, plus 7 templates
- MVPBlocks (source repo) · BSD-3 source for the MVPBlocks block library and its Next.js docs site
- Reverse UI · 68 animated React components built on Framer Motion, sold as a lifetime licence
- shadcn-glass-ui · Glassmorphism component set for React that installs through the shadcn CLI
- ShapeFactory · Five free browser tools: logo maker, LAB palettes, LAB gradients, duotone, QR gallery
- Shoogle · Search engine across 277 shadcn registries, with an MCP and CLI namespace
- Soft Club UI · 118 Radix-based React components in a late-90s dark-glass aesthetic
- Spell UI · 33 animated React components — text reveals, WebGL backgrounds, embeds — via shadcn CLI
- Spell UI (source repo) · MIT source for Spell UI: 33 React/Tailwind components served as a shadcn registry
- Spell UI · 33 polished React + Tailwind components, MIT, shadcn-installable
- Colorion Gradients · 37 hand-picked two-stop CSS gradients, one click to copy the CSS