What a mesh gradient is
A mesh gradient is a background that blends several colours flowing from different points across an area, producing a soft, multi-directional wash. Where a linear gradient fades along a single straight line and a radial gradient fades outward from one centre, a mesh gradient feels alive — colours bloom from several places at once and melt into each other. It’s the look behind countless modern landing pages, app headers, and product hero sections, and it reads as premium precisely because it’s harder to make by hand.
The Mesh Gradient Generator lets you build one visually and walk away with clean CSS. But the technique is simple enough to understand fully, and understanding it makes you much faster at getting the look you want.
The layered radial-gradient trick
Here’s the secret: a CSS mesh gradient isn’t a special gradient type at all. It’s several ordinary radial-gradient layers stacked over a base colour. Each layer places one soft blob of colour at a position and fades it to transparent, and because the layers are semi-transparent at their edges, they blend where they overlap.
A minimal example:
background-color: #1e1b4b; background-image: radial-gradient(at 20% 30%, #ff0080 0px, transparent 50%), radial-gradient(at 80% 10%, #7928ca 0px, transparent 50%), radial-gradient(at 50% 80%, #0070f3 0px, transparent 50%);
Read it top to bottom. The base colour fills the area. Then each radial-gradient(at X% Y%, color 0px, transparent N%) drops a coloured blob centred at X% Y% that’s fully saturated at its core and fully transparent by N% of the way out. Stack three or four of these and the transparent edges overlap, mixing into the smooth mesh you see. This is exactly the output the Mesh Gradient Generator produces — it just lets you nudge the points and colours visually instead of editing percentages by hand.
Positioning points
Each colour point has an X and a Y position expressed as percentages of the container: 0% 0% is the top-left corner, 100% 100% the bottom-right, 50% 50% the centre. Spreading points toward the corners and edges generally produces a more dynamic, balanced wash than clustering them in the middle, which tends to create one muddy blob.
The spread (the transparent N% value) controls how large and soft each blob is. A larger spread means each colour reaches further and blends more gently; a smaller spread keeps colours tighter and more distinct. The generator exposes this as a single slider so you can soften or sharpen the whole mesh at once.
Choosing colours
Mesh gradients live or die by their palette. A few principles help:
Colours that sit near each other on the colour wheel — analogous schemes like blues into purples, or oranges into pinks — blend into smooth, harmonious washes. Complementary colours (opposite on the wheel) create more energy and contrast but can produce muddy browns or greys where they overlap, so use them deliberately. If you want a coherent set to start from, build one with the Color Palette Generator and feed those hex values into the mesh.
The base colour matters more than people expect. A dark base (deep navy, near-black) makes vivid points glow and suits dark UI; a light base keeps things airy and soft. Because every blob fades to transparent, the base shows through wherever colours thin out, so it sets the overall mood.
Where mesh gradients work well
Mesh gradients shine as large background surfaces: full-bleed hero sections, app headers, card backgrounds, and login screens. At large sizes the soft blends have room to breathe and the premium quality comes through. They also make excellent social and thumbnail backgrounds, where a colourful, non-distracting backdrop helps foreground text pop.
They work less well as small accents or behind dense body text, where the colour variation can fight legibility. As with any gradient, keep enough contrast between the background and any text on top — our CSS gradient guide covers the contrast trade-offs that apply to gradients generally, and they hold here too.
Performance and practicality
Because a mesh gradient is pure CSS, it’s effectively free in performance terms: no image to download, no extra HTTP request, no blurriness when the container scales, and it adapts to any size automatically. It’s also trivial to tweak — change a hex value and the whole look shifts, no re-exporting required. That’s a real advantage over shipping a baked PNG, which is fixed in resolution and a pain to recolour.
The one thing pure CSS can’t do is hand you a raster image for places that need one — an Open Graph card, a printed asset, a video background. That’s where exporting to PNG or SVG becomes useful, and it’s the natural dividing line between a free CSS generator and a richer paid export workflow.
Layering, animation, and accessibility
Once you’re comfortable with the basics, a few techniques take mesh gradients further. Layering a subtle noise texture or a semi-transparent overlay on top of a mesh adds depth and can prevent the slight banding that smooth gradients sometimes show on large surfaces. Because the mesh is just a background, you can stack additional background-image layers above or below it.
Animation is where mesh gradients become genuinely eye-catching. By transitioning the point positions or rotating the whole background over time, you create a slow, living wash that draws attention without distraction. CSS transitions and keyframe animations can move the gradient positions; just keep the motion slow and subtle, because fast colour movement is distracting and can trigger discomfort for some viewers.
That last point matters for accessibility. Respect the prefers-reduced-motion media query and disable any animation for users who’ve asked their system to reduce motion. Equally important is contrast: never place body text directly on the busiest part of a mesh. Add a solid or semi-transparent panel behind text, or darken the mesh in that region, so the text comfortably clears WCAG contrast thresholds. A beautiful background that makes content hard to read is a net loss — the mesh should support the content, not compete with it.
The takeaway
A mesh gradient is nothing more exotic than a few radial-gradient layers stacked over a base colour — but that simple recipe produces some of the most modern, premium-looking backgrounds on the web. Spread your points, pick a harmonious palette, choose a base that sets the mood, and use the Mesh Gradient Generator to explore combinations quickly and copy production-ready CSS.