Mesh Gradient Generator

A mesh gradient is a soft, multi-colour background made by overlaying several radial gradients on top of a base colour. Each gradient has a position, a colour, and a soft fade to transparent — together they blend into the smooth, blob-like backgrounds you see on Stripe, Apple's marketing pages, Vercel, Linear, and most modern SaaS hero sections. Unlike a regular two-stop gradient, mesh gradients can have three, four, or more colours flowing in unpredictable directions, which is what gives them their dreamy, organic feel.

They hit the sweet spot between flat design (which felt sterile) and skeuomorphism (which felt heavy). Stripe popularised the look around 2017 with their marketing site, Apple leaned into it for iOS and macOS marketing, and Vercel/Linear/Framer pushed it into the default modern SaaS aesthetic. They feel premium because they look hand-painted, but they're really just stacked radial gradients in CSS — cheap to render, easy to brand, and they soften an otherwise minimal layout without adding clutter.

A linear gradient blends two or more colours along a single straight line — top to bottom, left to right, or any angle. A mesh gradient is fundamentally different: it places coloured blobs at independent positions across a 2D space and softens them into a base colour. The result is non-linear, organic, and has multiple visual focal points. CSS doesn't have a real mesh-gradient property (yet), so we fake it by stacking radial-gradients with transparency on top of each other.

Click the Copy button to grab the full `background:` declaration. Paste it into any element — typically the body, a hero section, or a card — and you're done. Because it's a CSS background, it works everywhere: HTML, React inline styles, styled-components, Tailwind (via the `bg-[...]` arbitrary value syntax), and CSS-in-JS. No JavaScript runtime, no images, no extra HTTP request — just the gradient rendered by the browser at full resolution on any screen.

Yes. Click Export PNG and the tool renders the current gradient onto a 1600 by 1000 pixel canvas and downloads it. The PNG is useful for slide decks, social posts, Notion covers, Figma frames, or anywhere you need a static asset instead of CSS. The exported image preserves the exact colours and positions you set in the preview.

Yes, when used as a CSS background rather than as an animated, ever-changing element. The browser paints the gradient once per layout and caches it like any other background. Where you get into trouble is animating gradient stops on every frame — that forces a full repaint of the painted area on every tick, which gets expensive on large hero sections. The safe pattern is to render the gradient once and animate transforms (translate/scale) or opacity if you want subtle motion.

Mesh gradients are decorative — they belong as backgrounds, never as the carrier of meaning. The main accessibility risk is contrast: if you put text on a colourful gradient, the contrast ratio with the foreground text changes depending on which blob the text is sitting on. The safe approach is to add a subtle dark overlay (or a backdrop blur on a card behind the text) so the contrast stays consistent. Always check the final composition with a contrast checker before shipping.

Yes. Tailwind's arbitrary value syntax lets you drop any CSS value into a class, so you can paste the generated background expression into a `bg-[...]` class. For a cleaner approach, add the gradient to your `tailwind.config.js` under `theme.extend.backgroundImage` with a named key (like `'mesh-hero'`), then use it as `bg-mesh-hero`. Both work — config-based is better for re-use across the project.

Multi-stop radial gradients are supported in every modern browser — Chrome, Safari, Firefox, Edge — going back many years. The exact syntax this tool emits (`radial-gradient(at X% Y%, color 0px, transparent N%)`) has had stable support since around 2015. For older browsers (IE11), the gradient falls back gracefully to the solid base colour, which is the desired behaviour for a decorative background.

Yes — completely free, no signup, no watermark, no rate limit. Everything runs in your browser; the gradient never leaves your device. Refresh the page and your work is gone (we don't store anything on a server), so copy or export before you close the tab. Bookmark the page and come back any time.