What Is Gradient Mesh Generator?
Gradient Mesh Generator creates complex, multi-point gradient backgrounds that go far beyond simple linear or radial gradients. By placing color nodes on a mesh grid, you can create organic, fluid color transitions — the kind of rich gradients seen in modern branding, hero sections, and app backgrounds.
How to Use This Tool
Start from one of twelve presets or add points with + Add (up to eight). Drag a point on the preview to move it, and set each point's color, spread (how far its glow reaches) and opacity. Pick a blend mode and a base color, optionally add grain, then copy the CSS. The preview is drawn with exactly the CSS you copy. Everything runs in your browser.
Why Use Gradient Mesh Generator?
Mesh gradients are a major design trend, but CSS can’t natively produce them with a single property — they require layered radial gradients or SVG. This tool writes that layered CSS for you, so you don't have to stack the gradients by hand. It’s free and runs entirely client-side. For a detailed walkthrough, see our step-by-step guide.
See also: For the CSS conic/radial mesh variant, the Mesh Gradient Generator composes nested radial gradients into a mesh effect.
Frequently Asked Questions
What is a mesh gradient and how is it different from a regular gradient?+
A regular CSS gradient changes color along one line or out from one point. A mesh-style gradient layers several radial gradients, each a soft glow of one color at its own position, over a base color, so color comes from several directions at once. Design apps can draw true mesh gradients from a grid of colored patches; CSS has no mesh primitive, so the usual CSS technique is this stack of radial gradients, optionally combined with background-blend-mode. That is what this tool writes: plain CSS, no image files.
How do I use the generated CSS in my project?+
Without grain, the output is three declarations (background-color, background-image and, unless the blend is Normal, background-blend-mode): paste them into the rule for any element, such as a hero section, the body or a card. With grain turned on, the output is a small rule set for a .mesh-bg class plus a .mesh-bg::after overlay; add class="mesh-bg" to your element. Gradient positions are percentages, so the mesh stretches with the element.
Will mesh gradients work in all browsers?+
Yes in current browsers. Radial gradients have been supported everywhere for years, and background-blend-mode works in current Chrome, Edge, Firefox and Safari for the six modes this tool offers. The optional grain uses an SVG noise tile and mix-blend-mode on a ::after layer, which current browsers also support; the element gets isolation: isolate so the grain only blends with the gradient.
Why not just use an SVG or PNG of a mesh gradient?+
Size and sharpness. The CSS is about 100 bytes per point (a three-point mesh is roughly 400 bytes), it renders sharp at any size or pixel density, and you can change a color in DevTools or swap brand colors without re-exporting an image. An image is the better choice only when you need detail CSS gradients cannot express.
How many points should I use?+
Usually three to five. One point is a single radial glow; two reads as a two-tone fade. The presets all use three. More points add complexity but can turn muddy; the tool allows up to eight.
Can I use this output as a website background without performance issues?+
For a static background, yes: it is a few hundred bytes of CSS with no image to download. Gradients are repainted when the element resizes or scrolls into view, so very large, animated or numerous mesh backgrounds can cost paint time on slow devices; check in your browser's performance tools if you animate them.
How is a mesh gradient different from a CSS radial-gradient?+
A single radial-gradient is one circular or elliptical color transition around a point. This tool writes one radial-gradient per point (one to eight), each fading from its color to transparent at its spread, stacked over a base color, so the colors meet and blend into a multi-point field.
Will mesh gradients render the same in Safari?+
Very nearly. The gradients and blend modes this tool uses are standard CSS, but browsers rasterize gradients and the SVG grain slightly differently, so expect small differences in smoothness rather than different colors. Check your final design in the browsers you care about.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service