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.

A linear gradient (CSS linear-gradient()) transitions colors along a single straight axis — top to bottom, left to right, or at an angle. A radial gradient (radial-gradient()) transitions colors outward from a single center point in concentric rings. Both are directional and mathematically simple, which makes them look "designed" and slightly artificial. A mesh gradient instead blends several color sources positioned freely around the canvas, so color flows in from multiple directions at once and mixes in the overlap zones. The result reads as organic and dimensional — closer to how light diffuses through frosted glass or how paint bleeds on wet paper. In practical terms: use linear or radial for buttons, cards, and subtle accents; use a mesh gradient when you want a rich, premium, full-bleed background that feels custom-made.

The SVG export uses a true Gaussian blur (feGaussianBlur) applied to solid circles, which produces a physically accurate, smoothly falling-off edge — the same math a photo editor uses for its blur tool. The CSS export instead simulates each blob with a radial-gradient() that fades from a solid color to transparent. A radial-gradient falloff is a linear or eased ramp, not a true Gaussian curve, so the transition zone is narrower and the edges read as slightly crisper. This is a fundamental difference between the two rendering methods, not a bug. If edge softness matters — for a hero background, for example — export the SVG. If you need a self-contained CSS background with no external file (for runtime theming or a CSS-in-JS component), the radial-gradient version is an excellent, lightweight approximation. You can soften the CSS version further by increasing the transparent color stop percentage in each radial-gradient.

No — when used correctly, mesh gradients are extremely lightweight. An exported SVG mesh gradient is typically only 1–4 KB because it is just a handful of circle elements and a blur filter described as text, not pixel data. That is far smaller than an equivalent JPG or PNG photo background and it scales to any resolution without a larger file. The pure CSS export adds zero network requests because it lives in your stylesheet. Both approaches render on the GPU and do not block the main thread. For best Core Web Vitals, prefer the SVG or CSS export over a large raster image, set the background with background-image rather than an <img> that could affect Largest Contentful Paint, and avoid animating the gradient on low-end devices. A well-optimized mesh gradient improves perceived quality with almost no performance cost.

Start from a preset that is close to your brand mood, then click each blob's color swatch and paste your exact brand hex values. For a cohesive result, use two or three brand colors plus one or two neighboring hues (analogous colors within about 30 degrees on the color wheel) rather than many unrelated colors — analogous palettes blend into smooth, professional meshes, while clashing hues can turn muddy where they overlap. Set the canvas background to a very dark or very light version of your primary brand color so the blobs sit on-brand. If you need help building the palette first, use our Color Palette Generator to create a harmonious set, then bring those hex codes into the blobs here. Keeping opacity around 80–90% preserves color vibrancy while still letting the blobs blend.

Yes. For design tools, export the PNG at the highest resolution you need (up to 3200×2000px) and drag it straight into Figma, Canva, Photoshop, or Illustrator as a background layer, then place your text and elements on top. Figma and Illustrator can also import the SVG directly if you prefer an editable vector — you will get individual blurred circles you can recolor or reposition inside the app. For social graphics and thumbnails, the PNG is usually the fastest path. For anything that will be resized a lot, keep the SVG so it stays razor sharp.

Yes, it is completely free with no sign-up, no watermark, and no usage limits. Everything you generate — SVG, PNG, or CSS — is yours to use in personal and commercial projects without attribution. The tool runs entirely in your browser: your colors, positions, and exports are never uploaded to a server, so your work stays private. You can create and download as many mesh gradients as you like.

Absolutely. For a dark theme, choose a deep background (navy, charcoal, near-black, or dark purple) and use saturated, luminous blob colors — the Aurora, Neon, and Dusk presets are built for this and give that glowing, premium look. For a light theme, choose a white, cream, or very pale background and reduce blob opacity to around 40–60% so the colors stay soft and never overpower foreground text — the Pastel preset is the ready-made starting point. If you support both modes, generate two versions with the same blob positions but swapped backgrounds and opacity, and switch between them with a CSS variable or a prefers-color-scheme media query.

The grain slider adds a fine, monochrome noise texture on top of the gradient. This is the subtle detail that separates a flat, obviously-CSS gradient from the premium mesh backgrounds you see on Stripe, Linear, Vercel, and Apple. A little grain (10–25%) breaks up colour banding on large gradients, adds tactile depth, and gives the background a filmic, designed quality. In the exported SVG the grain is rendered with an feTurbulence fractal-noise filter; in the CSS and React exports it is an inline SVG-noise background layer, so it travels with your code and needs no separate image. Keep it low — too much grain reads as visual dirt rather than texture.

Yes. Besides SVG and CSS, the tool has React and Tailwind export tabs. The React tab gives you a ready-to-paste component that returns a div with the gradient applied via an inline style object — drop it straight into any React or Next.js project. The Tailwind tab gives you a single element using Tailwind arbitrary values (bg-[#hex] and bg-[image:...]) with spaces encoded as underscores per Tailwind conventions, so it works without touching your config. All four formats — SVG, CSS, React, Tailwind — update live as you edit and have a one-click Copy button.

Yes. The Blur, Spread, and Opacity sliders set global defaults, but selecting any blob opens a per-blob editor where you can override its size and opacity independently. This is how you build sophisticated, realistic meshes: one large, dominant blob that anchors the composition plus several smaller, subtler accent blobs. Per-blob opacity also lets you push some colours forward and let others fade into the background, which adds depth that a single global opacity value cannot achieve. You can reset any blob back to the global opacity at any time.

There are two ways. Click "Save current" to store the gradient as a custom preset in your browser (localStorage), so it appears alongside the built-in presets next time you visit — handy for reusing your brand gradient across projects. To share with someone else, click "Copy shareable link": the tool encodes the full design (blob positions, colours, sizes, background, blur, spread, opacity, grain, and aspect ratio) into the URL, so anyone who opens that link sees and can edit your exact gradient. Nothing is uploaded to a server — the entire state lives in the link itself.

Match the canvas aspect ratio to where the gradient will live. Use 16:9 for website hero sections, video thumbnails, and presentation slides; 16:10 for app and dashboard backgrounds; 1:1 (square) for social posts, avatars, and album-style artwork; 4:3 for classic slide decks; and 9:16 for phone wallpapers, Instagram/TikTok stories, and mobile splash screens. Because the blobs are positioned as percentages, switching aspect ratio re-flows the composition automatically, and the export (SVG, PNG, JPG, or WebP) is produced at the ratio you pick so nothing gets cropped or stretched.