Mesh Gradient Generator — Free SVG & CSS Mesh Backgrounds

A mesh gradient is a type of background effect that blends multiple soft, overlapping color blobs to create a smooth, organic, multi-directional color transition — unlike a standard linear or radial gradient which has a fixed direction or a single center point. The effect produces a richly layered, almost three-dimensional color field that resembles the color mixing in watercolor painting or the soft blurring of bokeh lights. Mesh gradients became widely used in modern UI design after Apple popularized the style in macOS and iOS interfaces, and after Stripe adopted a highly sophisticated animated mesh gradient on their homepage. The technique is also called a "blob gradient," "soft gradient," or "fluid gradient" and is particularly popular as a hero background, card background, or decorative section backdrop in web design.

This tool creates mesh gradients using SVG technology. Each colored blob in your design is an SVG circle element with a Gaussian blur filter applied via the SVG feGaussianBlur primitive. When multiple large, heavily blurred circles overlap on a colored background, their colors blend smoothly at the edges to create the characteristic mesh gradient appearance. You drag the handles on the preview canvas to reposition each blob, pick individual colors with the color pickers, and adjust global settings like blur intensity (how soft/spread the edges are), spread (how large each blob is relative to the canvas), and opacity. The generated SVG file packages all these elements into a single portable vector file that renders at any size without loss of quality.

The SVG export produces a complete SVG file containing a background rectangle and multiple blurred circle elements — this is the highest-quality output, is infinitely scalable, and can be embedded directly in HTML with an <img> tag, used as a CSS background-image, or referenced in a <use> element. The SVG feGaussianBlur filter produces smooth, accurate color blending that closely matches the preview. The CSS export produces a pure CSS background using multiple radial-gradient() calls — one per blob — layered via background-image. This requires no SVG file and can be pasted directly into any stylesheet, making it ideal for dynamic theming and CSS-only projects. The CSS version is a good approximation but lacks the Gaussian blur smoothness of the SVG approach, so edges between blobs are sharper. For the best visual quality, use SVG; for pure CSS without external files, use the CSS export.

There are several ways to use the exported SVG. The simplest method is as a CSS background: background-image: url("mesh-gradient.svg"); background-size: cover;. You can also embed it inline in your HTML by pasting the SVG code directly inside a <div> — this avoids an extra HTTP request and allows CSS animation or JavaScript manipulation. In React or Next.js, import the SVG as a component or use it as a src attribute on an <img> tag. For Tailwind projects, add the SVG as a background utility: bg-[url("/images/mesh-gradient.svg")] bg-cover. The SVG is infinitely scalable so it looks sharp on any display density including Retina and 4K screens.

Use PNG when SVG is not supported or not practical. Email newsletters do not render SVG reliably across email clients, so PNG is the right choice for email backgrounds. Some older content management systems and social media platforms require raster images rather than SVG. PNG is also useful when you need to compose the gradient with other raster images in a photo editing tool like Photoshop or Figma. The tool exports PNG at 1600×1000px (2× the canvas size) for retina-ready quality — this resolution is large enough for full-bleed website backgrounds on most screens. For web use where scalability matters, SVG is always preferred over PNG.

Three to five blobs produces the best mesh gradient results for most use cases. With fewer than three blobs, the gradient can look too simple and directional — similar to a radial gradient rather than a true mesh. With four or five blobs spread around the canvas, the overlapping colors create complex, interesting blends from multiple directions. Adding more than five or six blobs typically produces diminishing returns — the colors start to mix too uniformly and the gradient loses its color distinction. The tool supports up to eight blobs for maximum flexibility. For a simple, elegant background, four blobs at the four quadrants of the canvas with a dark background is a reliable starting configuration.

Blur controls the SVG feGaussianBlur stdDeviation value — it determines how softly each blob's edges diffuse into the background and into neighboring blobs. Low blur values (10–30px) create visible, relatively hard-edged blobs; medium values (60–100px) produce the classic smooth mesh effect; high values (120–150px) create an ultra-soft, almost uniform color wash with barely visible blob boundaries. Spread controls the radius of each blob as a percentage of the canvas size. A spread of 50% means each blob's circle radius is 50% of the longest canvas dimension — at 800×500px that is 200px radius. Higher spread values cause blobs to cover more of the canvas and overlap more aggressively, producing richer color mixing. Lower spread with high blur creates airy, barely-there color clouds; high spread with medium blur creates the most dramatic mesh effect.

Yes — the exported SVG can be animated using CSS animations or SMIL SVG animation attributes. The simplest approach is to animate the cx and cy attributes of each circle element using SMIL <animate> tags inside the SVG, or to target the circles with CSS keyframe animations that translate the circle positions. For a JavaScript-powered animation like Stripe's, you can load the SVG inline and use JavaScript to smoothly update each circle's cx/cy values over time using requestAnimationFrame. Adding transition: cx 2s ease, cy 2s ease via CSS (cx and cy are animatable CSS properties in modern browsers) allows smooth blob movement when positions change. Start by exporting the SVG from this tool and then add animation on top of the generated markup.