What's a mesh gradient?

A 2D gradient with multiple color points scattered across the canvas, each blending into its neighbors. Produces soft, organic backgrounds — the Stripe homepage popularised the look around 2018.

SVG vs CSS output — which?

SVG is more accurate but slightly larger. CSS radial-gradients are inline-able and don't need an element. For a hero background, SVG; for a button or card surface, CSS.

Will this work as a CSS background?

Yes — paste the output into background or background-image. SVG works via background: url('data:image/svg+xml,...'). CSS-stack output works directly.

mesh · multi-stop · radial · CSS-only · live

Build a mesh gradient

CSS-only mesh gradient via stacked radial gradients. Position each stop and pick any color — no SVG required.

Mesh Gradient Generator

Stops

radial

Base

#f0abfc

bg color

Style

radial-mesh

css

Status

ready

live

input · color

Stops

output · preview

Live preview

background-color: #f0abfc;
background-image: radial-gradient(at 20% 20%, #f0abfc 0px, transparent 50%),
  radial-gradient(at 80% 30%, #a5b4fc 0px, transparent 50%),
  radial-gradient(at 30% 80%, #67e8f9 0px, transparent 50%),
  radial-gradient(at 70% 85%, #fde68a 0px, transparent 50%);

Quick Start

How to build a mesh gradient

Stack radial gradients on a base color — each stop fades to transparent, blending naturally.

01
Pick the base
The first stop becomes the background fill — pick a complementary color.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
baseOKLCHCSS Color 4perceptuallive
base · colorcolor · sRGB
```
#f0abfc
```
loaded · normalisedOKLCH · ready
02
Place stops
X/Y % positions each radial center within the box.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
placehex · rgb · hslP3gamut-mappedlive
xy · options% · live
```
20% 80%
```
options applied · livelive
03
Layer & blend
Each radial fades to transparent so they blend visually.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
blendWCAG 2.2APCAAA · AAAcontrast
blend · convertedsoft · ready
```
radial mesh
```
converted · liveWCAG-aware
04
Copy CSS
Pure CSS — no SVG, no images, no canvas.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
background-image: …;
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to use mesh gradients

Heros, landing pages, decorative backgrounds.

Landing hero

Soft hero background without an image. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Cards

Decorative behind product card or modal. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Section dividers

Subtle ambient color between sections. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Emails

Some clients support multi-stop CSS gradients. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick decoration

More interesting than a flat fill in seconds. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Drop into Tailwind config or CSS modules. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Why radial gradients?

They blend naturally with the underlying fill. Linear can't fake mesh shapes.

Why not SVG mesh gradients?

SVG mesh isn't widely supported. Stacked radials work everywhere.

Is it animatable?

Yes — animate background-position or transition between gradient strings.

Why does the first stop control bg?

It's the base layer the radials fade into. Pick a color that complements the others.

Is anything sent to a server?

No — the CSS is generated locally.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!