NEAT – Free 3D Gradient Generator for Websites
Create stunning animated 3D gradient backgrounds for your website.
NEAT is a free, open-source gradient generator powered by WebGL and three.js
with hardware-accelerated 60fps performance.
Features
- 20+ beautiful gradient presets
- Real-time visual editor — no code required
- Animated 3D wave effects with customizable colors
- Mouse-reactive gradient distortions
- Film grain, flow fields, and procedural texture overlays
- Parallax scroll integration
- Export clean config for React, Vue, or vanilla JS
- npm package:
npm install @firecms/neat three
Perfect For
- Hero section backgrounds
- Landing page animations
- SaaS and startup websites
- Portfolio and creative sites
How It Works
NEAT uses WebGL shaders and three.js to render dynamic 3D gradients entirely on the GPU.
A subdivided plane geometry is displaced with Perlin noise to create waves, while
a fragment shader blends colors, applies flow fields, lighting, and effects —
all at smooth 60fps on any modern device.
Made with ❤ by FireCMS |
GitHub |
npm