CSS Gradient Mesh Generator

What is a mesh gradient?

A mesh gradient (also called a "gradient mesh" or "blob gradient") is a soft, multi-color background made by blending several color points together instead of a single straight or radial fade. Where a normal CSS linear-gradient or radial-gradient moves smoothly between just two or three stops along one axis, a mesh gradient scatters color across the whole box — the look popularized by tools like Stripe's marketing pages, Mesher, and countless "aurora" or "blob" hero backgrounds.

This tool builds the effect with pure CSS: four different colors, one anchored at each corner (top-left, top-right, bottom-left, bottom-right), each rendered as its own radial-gradient() layer. Stacking all four as comma-separated background-image layers over a solid base color produces the soft, painterly blend — no images, canvas, or JavaScript required at runtime.

How to use this tool

1. Pick a color for each of the four Corner Colors — Top Left, Top Right, Bottom Left, Bottom Right — plus a Base color that shows through where the corner blobs don't reach.
2. Adjust Blend Size % to control how far each color spreads before fading to transparent — larger values create bigger, softer, more overlapping blobs.
3. Adjust Falloff % to control how quickly each blob fades — lower values give a sharper, more concentrated dot of color; higher values spread the color out more gradually.
4. Optionally enable Add Grain Overlay and set its intensity to get a ready-made noise-texture recipe (an inline SVG feTurbulence filter) to layer on top — a popular touch on modern mesh-gradient hero sections that keeps flat color blends from looking too clean/banded.
5. Choose an Output Format: CSS gives you a background-color + layered background-image declaration you can paste straight into a stylesheet; SVG gives you a standalone <svg> with four <radialGradient> defs, useful when you need the mesh as an image asset rather than a live CSS background.
6. Copy the generated code, or download it, and drop it into your project.

The output updates instantly as you adjust any control — there's no separate "generate" step.

Why four corners?

Four corner-anchored blobs is the simplest arrangement that still reads as a genuine "mesh" rather than a single blob or a two-color diagonal fade — every corner of the box gets its own color, and the middle becomes a natural blend zone. It also keeps the generated CSS short: four radial-gradient() layers, no extra markup, no positioning math to maintain.

FAQ

Will this work in every browser? Yes. Layered radial-gradient() backgrounds and multiple comma-separated background-image values have been supported in all major browsers for many years — no vendor prefixes needed.

Can I use more than four colors? Not with this tool — it's built around the four-corner case, which covers the vast majority of mesh-gradient use cases while staying easy to read and edit by hand. For a mesh gradient, you can still tweak any of the four colors to taste.

What's the difference between the CSS and SVG output? The CSS output is a background declaration meant to be pasted directly into a stylesheet or style attribute — it renders as a live, resolution-independent background. The SVG output is a standalone image (a <svg> element with radial gradient definitions) — use it when you need a mesh gradient as a file or embedded image rather than a CSS background.

Why is my grain overlay a separate CSS block instead of baked into the background? Grain works best as mix-blend-mode: overlay on a positioned child element sitting on top of the mesh, so the noise blends into the colors underneath rather than replacing them. The tool outputs the ready-made .mesh-grain rule (with the noise pre-encoded as an inline SVG data URI) — add a child element with that class inside your gradient container.

Privacy

Everything happens in your browser. Your chosen colors and settings are never sent to a server — the CSS or SVG is generated and updated locally as you adjust the controls.