Question 1

What is a mesh gradient and how is it different from a regular gradient?

Accepted Answer

A regular CSS gradient (linear or radial) transitions between colors along one axis or outward from one point. A mesh gradient uses multiple radial gradients stacked on top of each other with transparency and blend modes, so color flows from several directions at once. The result is the soft, organic, photographic-looking backdrop you see on modern SaaS landing pages (Stripe, Linear, Vercel, Resend) and in hero imagery for Spotify, Apple, and most recent brand refreshes. In true design software (Illustrator, Figma's Vector Networks) a mesh gradient is a patch-based color interpolation; in CSS there's no native mesh primitive, so the standard technique is to layer 4–8 radial-gradients with alpha on a solid base color and let the browser composite them. This tool generates exactly that — pure CSS, no SVG, no PNG.

Question 2

How do I use the generated CSS in my project?

Accepted Answer

Copy the CSS output and set it as the background of any element. The full rule looks like: background-color: #base; background-image: radial-gradient(...), radial-gradient(...), radial-gradient(...); — set these on the element you want to color. For a hero section, apply to the section element with min-height. For a full-page backdrop, apply to body and set min-height:100vh. For a card or a button, apply to the element directly. The gradient is purely declarative — no JavaScript required, no images to host, no loading states. If you need the mesh to cover the viewport on a static site, add background-attachment: fixed. For responsive hero sections, the mesh scales naturally because radial-gradient uses percentage positions by default.

Question 3

Will mesh gradients work in all browsers?

Accepted Answer

Yes. Stacked radial gradients and mix-blend-mode are supported in every modern browser — Chrome, Firefox, Safari, Edge, and mobile Safari and Chrome — with no vendor prefixes needed. The technique has been stable since around 2018. The only caveat: mix-blend-mode creates a new stacking context, so if your mesh is an overlay on top of other content, the blend only applies against what's below it inside the same parent. If you're applying the mesh directly to a background (which is what this tool's export does), that caveat doesn't apply — the layers blend against each other and then the whole stack renders as the element's background. For IE11 you'd need a fallback solid color, but IE11 has been dead for long enough that it's not a practical concern anymore.

Question 4

Why not just use an SVG or PNG of a mesh gradient?

Accepted Answer

Three reasons. First, file weight: a 1920×1080 PNG of a mesh gradient is typically 200–400KB; the equivalent CSS is under 500 bytes. On mobile especially, that's a meaningful Largest Contentful Paint win. Second, resolution independence: a PNG is baked at one size and pixelates on 4K retina displays; CSS renders at whatever resolution the device has, forever. Third, editability: you can tweak the CSS in DevTools live, A/B-test a color without opening Photoshop, or change brand colors by swapping a variable. The one case where an image wins is when you want a very specific hand-painted gradient with sharp internal structure — but that's a very different aesthetic from the soft-mesh look, and it's rare.

Question 5

How many points should I use?

Accepted Answer

Three to five. One point is just a radial gradient. Two points is a bi-tonal gradient that reads as an ombre. Three points is the sweet spot — enough for visual interest, few enough to stay simple and compositionally clear. Four or five points is good for more complex brand backgrounds where you want the eye to wander. Six or more points starts to look muddy and loses the signature 'three or four colored glows blending' feel that makes mesh gradients feel modern. The built-in presets all use three to five points for this reason. If you find yourself adding a seventh point, consider whether you actually want a different base color instead.

Question 6

Can I use this output as a website background without performance issues?

Accepted Answer

Yes. CSS radial gradients are GPU-accelerated on every modern browser and render in under a millisecond even with eight stacked layers. The output from this tool is roughly 400–800 bytes of CSS (no images, no SVG, no fetches), which is orders of magnitude lighter than any hosted image would be. For animations — if you want the mesh to subtly shift colors or positions on scroll or over time — you can animate the radial-gradient positions via CSS custom properties or Web Animations API. The only performance concern is if you animate a lot of large elements with mesh backgrounds simultaneously on low-end hardware; for static or slowly-animated heroes, it's essentially free.

📖 Learn More