← All free tools
🌈

Gradient Generator

Design a beautiful gradient — linear, radial, conic or a draggable mesh — add grain and animation, then export CSS, Tailwind, SVG, PNG or an animated loop. Free, no watermark, all in your browser.

Colour stops · drag handles, click the bar to add
%
%
%
Angle
135°
Grain0%
Presets
.gradient {
  background-image: linear-gradient(135deg, #22d3ee 0%, #8b5cf6 50%, #d946ef 100%);
}

Gradient FAQ

Is this gradient generator free?

Completely. No signup, no watermark, no export limits — and it runs entirely in your browser, so nothing is uploaded. Copy CSS or download a PNG, SVG, animated WebM or GIF as many times as you like.

Can it make mesh gradients?

Yes. Switch to Mesh mode and drag the colour points right on the preview — that soft, multi-point blurred-blob look you usually pay for is free here. Export it as CSS, PNG or an animated loop.

How do I make a grainy / noisy gradient?

Turn up the Grain slider. It overlays a fractal-noise texture (the trendy 'grainy gradient' look) and is included in the copied CSS via a ::before layer, so it works on any site.

Can I get an animated gradient?

Yes — toggle Animate and set the speed. You get a seamless looping hue-cycle in the live preview, in the copied CSS (with @keyframes) and as a downloadable WebM or GIF. It respects reduced-motion preferences.

How do I export or share a gradient?

Copy ready-to-paste CSS, Tailwind or SVG; download a PNG at wallpaper/social sizes; or copy a share link — the whole design is encoded in the URL so anyone can open and remix it.

Need colours first? Pull a palette from an image →

Free, no signup. See all free tools →