Free Mesh Gradient Generator

Design beautiful mesh gradients in your browser.

Drag colour points, randomise the layout, or pick from curated palettes — then copy the CSS or download as PNG. No installs, no signup.

Drag-and-drop points Random or manual Copy CSS · Download PNG

Download

background-color: #0a0a14;
background-image:
  radial-gradient(at 20% 25%, #a78bfad9 0px, transparent 60%),
  radial-gradient(at 80% 30%, #fb923ccc 0px, transparent 55%),
  radial-gradient(at 30% 80%, #f472b6cc 0px, transparent 60%),
  radial-gradient(at 75% 75%, #06b6d4bf 0px, transparent 55%);

Colour points

X · 20%Y · 25%Size · 60%

X · 80%Y · 30%Size · 55%

X · 30%Y · 80%Size · 60%

X · 75%Y · 75%Size · 55%

Background colour

Presets

How it works

Step 01

Pick a starting point

Use a preset palette or click Auto to randomise everything in one go.

Step 02

Tweak it your way

Drag the colour dots on the canvas, change individual colours, or tune position and spread with sliders.

Step 03

Export

Copy the CSS (or Tailwind) snippet and paste it straight into your project — or download a PNG at HD, FHD or 4K.

One gradient. Every modern site.

Mesh gradients give your website the soft, layered colour blends that have taken over Apple, Stripe, Linear, and pretty much every modern landing page. Build one in seconds — no design tool, no Figma, no plugins.

Need a custom site to put your gradient on?

We build fast, beautiful websites that load in under 2 seconds.

From custom WordPress builds to Next.js SaaS landing pages — we ship sites that look stunning and convert. Chat on WhatsApp and let's talk.

Chat on WhatsApp Or send a message