Live shaders.
Installed in one line.
AI generates unique mesh, noise, metaball, and voronoi shader backgrounds. Drop them into any Next.js + Tailwind project as a live React component via the shadcn CLI.
npx shadcn@latest add shaderui.com/r/aurora-meshDescribe a vibe to create a gradient
Free forever for the public registry · no signup to install
How it works
Three steps to perfect
Describe
Type a mood, aesthetic, or vibe. Pick a shader family — mesh, noise, blobs, or patterns — and AI turns your words into a palette with tuned parameters.
Edit
Refine the palette, dial in distortion, swirl, scale, rotation, and offset. Every knob is live — the canvas updates as you move.
Export
Download PNG, SVG, or paste-in CSS. Each format bakes a pixel-perfect capture of the live shader.
Real shaders.
In your codebase.
One line.
A live shader.
Every gradient on ShaderUI is a real React component, not a screenshot. One CLI command drops it into your Next.js + Tailwind project, dependencies and all.
AI Generation
Describe a mood, aesthetic, or vibe. AI picks the palette and dials in the shader knobs — no color theory, no fiddling with sliders.
Four Shader Families
Mesh gradients, noise textures, metaballs, and voronoi patterns — each a real WebGL shader, not a CSS approximation.
Shape & Motion
Pull the distortion, swirl, scale, rotation, and more. Every knob is live — the canvas updates as you move.
Tunable Palette
Refine the AI palette with a full color picker. Add, remove, and reorder up to ten colors per gradient.
Drop-in ready code
Need a static asset instead? Download exactly what you see as PNG, SVG, or CSS. Each format bakes a high-res capture of the live shader.
Start creating
beautiful gradients
No design skills needed. Describe what you want and let AI do the rest.