Free Mesh Gradient Generator

What is a mesh gradient?

A mesh gradient is a background made from overlapping soft radial color patches rather than a single linear or radial sweep. The name comes from Adobe Illustrator's "gradient mesh" tool, but the web version is simpler: stack a handful of blurry radial-gradient layers with different colors and positions, and you get the smooth, painterly background you see on OpenAI, Linear, Stripe, and most AI-company landing pages built between 2021 and 2024.

The generator above has four modes. Hero places a small number of bold peaks via Perlin-noise heightmap — good for landing-page heroes. Ambient spreads five soft washes wider and faster — good for dashboard empty states. Mesh drops 22 small peaks for a painterly, multi-color look. And OpenAI scatters 12 skewed radial gradients with asymmetric focal points, the exact technique behind the 2020 OpenAI brand refresh.

How to use the output

Pick a mode, drop in some colors, tweak the sliders until it looks right, then copy or download the export format you need.

• CSS. One block with a stacked radial-gradient() background and a @keyframes animation if you enabled it. Paste into any stylesheet. Set the parent to position: relative; overflow: hidden if you are using it as a backdrop.
• SVG. A single self-contained SVG file. Works for every mode including OpenAI, and the animated version uses inline animateTransform — no JavaScript required.
• PNG. Rendered to a canvas in your browser at the size you choose, then downloaded. No upload, no server — the image never leaves your machine. PNG exports capture a single frame; use SVG if you want motion.
• React / Next.js. If you are building with our UI package, the component is already exported as <RandomGradient colors={[...]} mode="openai" /> from @auxx/ui. Works in App Router server components out of the box.

About the OpenAI gradient

When OpenAI refreshed their brand in 2020, the hero backdrop was a very specific look: several soft radial gradients, each stretched into a skewed ellipse, scattered across the frame with asymmetric focal points and a slight drift animation. That combination — skew, asymmetric focal point, and color stops at very specific opacity curves — became shorthand for "AI company" for the next several years, and shows up in dozens of AI product sites today.

The reason most mesh-gradient generators on the web do not reproduce this look faithfully: CSS cannot express skewX on a radial-gradient focal point. Our OpenAI mode uses SVG with a full scale/skewX/rotate/translate chain on each layer, plus SMIL animateTransform for the drift. It is more markup than a CSS gradient, but it is the only way to get the authentic look.

CSS vs SVG mesh gradients

CSS is simpler, animates with a single @keyframes rule, and works anywhere. But it cannot do skew on radial focal points, so you are limited to elliptical and elongated gradients without the asymmetric OpenAI look. SVG can do everything — skew, asymmetric focal points, inline animation, precise blend modes — at the cost of slightly more markup.

Rule of thumb: if your gradient works in Hero, Ambient, or Mesh mode, CSS is fine. If you specifically want the OpenAI look, go SVG. PNG is there for Figma imports, email headers, and wallpapers — anywhere you need a raster.

When to use a mesh gradient on your site

Mesh gradients are best used as hero backdrops, dashboard empty states, email template headers, and feature-card backgrounds. They should not sit behind body text — the varying brightness of the peaks makes reading difficult, and the slow drift animation (if enabled) pulls the eye off the content. Use them for space, not for surfaces that need to carry copy.

Blur is the easiest knob to overshoot. A small amount (10–30px) softens the layer boundaries and hides the seams between peaks. Going too high smears the gradient into a single muddy color. If your mesh gradient looks washed out, cut the blur first before you touch the opacity curves.

From gradient generators to well-designed software

We built this tool because we care about the craft. The same team makes Auxx.ai — a customer-support platform for small businesses where every screen gets the same level of attention we put into this generator.