Mesh Gradients

When to use Mesh Gradients

• Hero section backgrounds: Replace flat colour or generic stock photography with a brand-colour mesh that feels distinctive without requiring a designer to open Figma.
• Card and modal backdrops: Apply a subtle mesh as the background of a floating card to add depth without introducing a hard drop shadow.
• Loading and placeholder states: Animated mesh gradients make skeleton screens feel less static, giving users a sense of activity during data fetching.
• Social media and marketing assets: Export as SVG and import directly into Figma or Illustrator as a background layer for on-brand social graphics.

How mesh gradients are constructed from radial layers

A mesh gradient is not a single CSS gradient - it is a stack of multiple radial gradients, each positioned at a different point on the canvas, blending into one another through transparency. The Mesh Gradient Generator places between four and eight radial gradient layers, each assigned its own colour, position (expressed as percentage x/y coordinates), and spread radius. Because radial gradients with transparent outer edges are layered via CSS, the browser's compositing engine blends them into the characteristic soft, organic mesh appearance.

The tool lets you control each control point's colour independently, drag it to a new position, and adjust its spread - the radius of the colour blob before it fades to transparent. Adding more control points introduces more colour intersections, which produces a richer, more complex mesh. Reducing spread on overlapping blobs sharpens the transition lines; increasing it creates smoother blending.

Output is clean CSS that uses multiple background-image values on a single element with an optional base background-color fallback for browsers with limited gradient support. The SVG export uses a feGaussianBlur filter applied to a set of coloured rectangles, which produces a visually identical result and is useful when the gradient needs to be embedded in a file format rather than applied via stylesheet. The entire gradient is defined by six or fewer lines of CSS in most cases.