Create organic, multi-colour mesh gradients. Drag the colour points, adjust blur, and copy the CSS.
The CSS Mesh Gradient Generator lets you build soft, organic, multi-colour backgrounds by placing and dragging colour points on a live canvas, then copies clean, ready-to-paste CSS for your project — no design software and no sign-up required.
A mesh gradient blends several colours that bleed into one another from different positions, giving a backdrop the rich, painterly depth you see across modern product sites like Stripe, Linear, and Vercel. Instead of wrestling with an SVG editor or a heavyweight design app, you start from a hand-tuned preset, drag each colour point exactly where you want it, and watch the blend update instantly. The blur slider controls how far each colour spreads, while the opacity slider sets how strongly the points show through the base colour — together they take you from subtle, barely-there tints to bold, saturated artwork. Add as many colour points as you like, recolour any of them with a click, or hit randomise to discover combinations you would never have reached by hand. People use it to:
The output is plain CSS built from layered radial-gradient functions, so it scales to any size, stays crisp on every screen, and adds no extra image weight to your page. Everything runs locally in your browser — nothing you create is ever uploaded, and your colours and layouts stay entirely on your device.
background-image.The output uses standard CSS radial-gradient functions, so it renders identically in all modern browsers. Older browsers fall back to the base background colour.
This tool produces pure CSS. To rasterise it, screenshot the preview or place the CSS on an element and capture it with your browser's dev tools.
They give backgrounds a soft, organic feel and look modern next to flat colours — popular in 2020s product design (Stripe, Linear, etc.).
A mesh gradient is a background made from several colour points that blend into one another from different positions, instead of fading along a single straight or circular path. The result is a soft, painterly, multi-directional wash of colour. This generator builds that effect by layering several soft radial blends, one per colour point, over a base background colour.
A linear gradient fades between colours along one straight line, and a radial gradient fades outward from a single centre point. A mesh gradient combines many colour points spread across the area, so colours blend in several directions at once. That is what gives it the organic, multi-toned look that flat linear and radial gradients cannot easily produce.
The tool stacks several radial-gradient layers in a single background-image rule, each one a soft ellipse of colour fading to transparent at the position you set. They sit over a solid background-color, so the colours overlap and merge into a mesh. Because it is plain CSS using standard radial gradients, it renders identically in all modern browsers and needs no images or libraries.
Copy the generated CSS and apply the .mesh-gradient class to the element you want to style, such as a section, hero, or the page body. The rule sets both a base background-color and the layered background-image, so it fills the element at any size. To cover the whole viewport, apply it to a full-height container and let the radial layers scale with it.