Mesh gradient generator

The generator opens on the Mesh style. Pick two to six colours and a background, or start from one of the palettes above. Colour order matters: the first colour sits in the light and the last in the shadow, so put your lightest colour first.

Then shape it. Scale sets how large the colour fields are, Blur how softly they meet, and Warp how much they ripple into each other. Seed turns the direction the light comes from, and Speed sets how fast the colours drift. Add grain to take the digital smoothness off.

Copy a share link, copy the gradient as code for React, Vue, Svelte or plain HTML, or copy one shadcn command that installs it as a component in your project. Tuning and share links need no account; copying code or exporting needs a free one.

Export a still PNG up to 1920px, or an MP4 of up to 10 seconds at 1080p and 60 fps, free and without a watermark. Pro goes up to 16K stills and 6K video. Video export needs WebCodecs, which Chrome and Edge support today.

Each colour is a soft field of light, and the shader blends them in OKLab, a colour space built to match how people see. A plain RGB blend turns the space between blue and orange muddy grey; an OKLab blend stays clean. Where fields overlap the shader also restores most of the colourfulness that averaging takes away.

The fields drift around closed circular paths, so the motion never jumps back to a start. An exported MP4 is always one whole loop that ends where it began, ready to repeat with no seam.

Most mesh gradient tools give you a still image or a block of CSS radial gradients. Those work, and cost nothing to run, but they sit still or move only as fast as CSS can animate them. How to make a mesh gradient in CSS and React shows the CSS way and when it's enough.

Here the mesh is a live shader. It moves, it can react to the pointer and to scrolling, and it follows CSS variables, so the same component can switch colours with your light and dark theme.