Is the mesh gradient generator free?

Yes. There is no sign-up, no watermark and no limit. Everything runs in your browser, and the colors you pick are not uploaded.

Is a CSS mesh gradient a real mesh?

Not strictly. CSS has no mesh gradient property, so the output stacks several radial-gradient() layers over a base color. Each layer fades from one color to transparent, and together they blend into a soft mesh-style look.

Can I use the gradients commercially?

Yes. The CSS and PNG files you generate are yours to use on personal and client projects, with no attribution required.

Why does my PNG look slightly different from the preview?

The PNG is drawn on a canvas with the same colors, positions and fade. Film grain is random, so it differs a little each time, and a 1920×1080 or 1000×1500 canvas has a different shape from the preview box, so the glow reaches the corners a bit differently.

Can the gradient move?

Not in this tool. It makes static CSS and images. For a moving WebGL gradient, see Shader Gradients.

Free tools / Mesh gradient

Free mesh gradient generator

Drag color points, soften the blend, then copy the CSS or download a PNG. Static output, no sign-up.

Drag the dots to move colors. On a keyboard, focus a dot and use the arrow keys (Shift = bigger steps).

Base

SoftnessGrainFilm grain overlay

Starter palettes

CSS

background-color: #f3e9dc;
background-image:
  radial-gradient(circle at 18% 22%, #e8794a 0%, transparent 58%),
  radial-gradient(circle at 78% 16%, #f2c46d 0%, transparent 58%),
  radial-gradient(circle at 70% 82%, #b5532f 0%, transparent 58%),
  radial-gradient(circle at 20% 80%, #7fa88e 0%, transparent 58%);

Tailwind (arbitrary values)

bg-[#f3e9dc] bg-[image:radial-gradient(circle_at_18%_22%,_#e8794a_0%,_transparent_58%),radial-gradient(circle_at_78%_16%,_#f2c46d_0%,_transparent_58%),radial-gradient(circle_at_70%_82%,_#b5532f_0%,_transparent_58%),radial-gradient(circle_at_20%_80%,_#7fa88e_0%,_transparent_58%)]

What is a mesh gradient?

A mesh gradient blends several colors across a surface instead of along one line. Where a linear gradient goes from A to B, a mesh gradient lets three, four or five colors each glow from their own spot and melt into one another. It is the soft, organic background look you see on landing pages and in app icons.

CSS has no mesh gradient property. The usual trick, and the one this tool outputs, is to stack several radial-gradient() layers on top of a background-color. Each layer fades from one color to transparent, so the layers blend.

Use the CSS on your site

Webflow: select the section, open Style, then Backgrounds. For custom CSS, add an Embed element with a <style> block that targets a class you gave the section. Webflow effects.
Framer: on a frame, add a Fill, or use a code override or a Custom CSS in Site Settings to apply the declarations. Framer effects.
WordPress: in the block editor, give a Group block an Additional CSS class, then paste the rule into Appearance, Customize, Additional CSS. WordPress effects.
Shopify: in the theme code, paste the rule into base.css (or a section’s {% style %} block) and add the class to your section. Shopify effects.
React: paste the lines into a style object or a CSS file, or use the Tailwind snippet as a class on the element. React effects.

Want it to move? The how-to for an animated shader gradient background in Framer and Webflow covers it, or see the full list of web effects.

Frequently asked questions

Is the mesh gradient generator free?: Yes. There is no sign-up, no watermark and no limit. Everything runs in your browser, and the colors you pick are not uploaded.
Is a CSS mesh gradient a real mesh?: Not strictly. CSS has no mesh gradient property, so the output stacks several radial-gradient() layers over a base color. Each layer fades from one color to transparent, and together they blend into a soft mesh-style look.
Can I use the gradients commercially?: Yes. The CSS and PNG files you generate are yours to use on personal and client projects, with no attribution required.
Why does my PNG look slightly different from the preview?: The PNG is drawn on a canvas with the same colors, positions and fade. Film grain is random, so it differs a little each time, and a 1920×1080 or 1000×1500 canvas has a different shape from the preview box, so the glow reaches the corners a bit differently.
Can the gradient move?: Not in this tool. It makes static CSS and images. For a moving WebGL gradient, see Shader Gradients. See Shader Gradients.