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

A regular CSS gradient transitions between colors along one axis or outward from one point. A mesh gradient uses multiple radial gradients stacked with transparency and blend modes, so color flows from several directions at once. The result is the soft, organic, photographic-looking backdrop on modern SaaS landing pages. In design software a mesh 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.

How do I use the generated CSS in my project?

Copy the CSS output and set it as the background of any element. The full rule is background-color plus background-image with stacked radial-gradients. For a hero section, apply to the section with min-height. For a full-page backdrop, apply to body with min-height:100vh. No JavaScript, no images, no loading states. For fixed backdrops, add background-attachment: fixed.

Will mesh gradients work in all browsers?

Yes. Stacked radial gradients and mix-blend-mode are supported in every modern browser — Chrome, Firefox, Safari, Edge, mobile Safari and Chrome — with no vendor prefixes. Stable since 2018. The one caveat: mix-blend-mode creates a new stacking context, so overlay meshes only blend against siblings in the same parent.

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

Three reasons. File weight: a 1920×1080 PNG is 200–400KB; the CSS is under 500 bytes. Resolution independence: a PNG pixelates on 4K retina; CSS renders at device resolution. Editability: tweak CSS live in DevTools, A/B-test a color without opening Photoshop, change brand colors by swapping a variable.

How many points should I use?

Three to five. One point is a radial gradient. Two is a bi-tonal ombre. Three is the sweet spot — enough for visual interest, few enough to stay clear. Four or five is good for more complex backgrounds. Six or more looks muddy and loses the signature blending feel.

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

Yes. CSS radial gradients are GPU-accelerated and render in under a millisecond even with eight stacked layers. The output is roughly 400–800 bytes of CSS — orders of magnitude lighter than any image. For static or slow-animated heroes, performance is essentially free.

How to Create a CSS Mesh Gradient (2026)

🎨

Try Gradient Mesh Generator

Free, no signup →