Mesh Gradient Generator — free online

You want a nice background for a card, a hero, or a button, and a flat color feels a bit dull. A mesh gradient gives you that soft, modern look where a few colors blend into each other. We added a free tool that does it — Mesh Gradient Generator — right in your browser.

What it does

It builds CSS mesh gradients by layering several radial color spots over a base. You add colors, move them around, and watch the blend change live. When you like it, the tool gives you the CSS you can drop straight into your site.

Nothing leaves your device

The whole thing runs in your browser. Nothing is uploaded, nothing is saved on a server. Your colors and your design stay with you, and you can close the tab whenever you're done.

How to use it

  1. Open Mesh Gradient Generator in your browser.
  2. Add and drag color spots until the blend looks the way you want.
  3. Copy the CSS and paste it into your project.

It's free with no limit. There are more small tools on the Apps page.

Get new posts

Soon you'll be able to drop your email and get new posts — no account, no spam.

Email sign-up isn't live yet — nothing is collected for now.