CSS Mesh Gradient Generator

Create rich, multi-colour backgrounds

A mesh gradient blends several colours across a surface in soft, organic-looking blobs, giving a result far richer and more contemporary than a plain two-colour linear gradient ever could. This generator builds that effect by cleverly layering radial gradients in pure CSS, giving you a trendy, colourful background with no image file required at all. Because it is all code, you can adjust a single colour later without having to re-export anything.

How layered radial gradients fake a mesh

A true mathematical mesh gradient is complex to compute, but a genuinely convincing approximation comes from simply stacking several radial gradients on top of one another, each one a soft blob of colour placed at a different point on the surface, and letting them blend together where they overlap. Because the whole thing is pure CSS, it scales cleanly to any size, stays extremely small in file size, and can be tweaked just by changing a colour value, none of which an exported raster image can offer.

Copy the CSS background

It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.