Back to All tools

Mesh gradients

Gradient background generator

Soft, glowing mesh gradients for wallpapers, posts, slides and websites. Drag the colours, add grain and download in seconds.

CSS code (for websites)

background-color: #FFFFFF;
background-image: radial-gradient(circle at 5% 15%, #F2708F 0%, rgba(242, 112, 143, 0) 55%),
  radial-gradient(circle at 40% 0%, #A69BD3 0%, rgba(166, 155, 211, 0) 50%),
  radial-gradient(circle at 75% 30%, #35C2F1 0%, rgba(53, 194, 241, 0) 55%),
  radial-gradient(circle at 30% 90%, #5DCCB8 0%, rgba(93, 204, 184, 0) 55%),
  radial-gradient(circle at 95% 90%, #8CC84B 0%, rgba(140, 200, 75, 0) 50%);

How it works

  1. 1

    Pick a preset

    Aurora, sunset, spectrum, pastel, ocean — or shuffle for something new.

  2. 2

    Drag the colour spots

    Move, recolour, add or remove spots and change their spread.

  3. 3

    Add grain

    A touch of film grain for a premium, printed feel.

  4. 4

    Download

    PNG at any size, vector SVG, CSS — or design on top of it.

Questions

What is a mesh gradient?
A soft blend of several colour spots instead of a straight line between two colours — the smooth, glowing backgrounds used by modern brands and apps.
Which sizes can I download?
Desktop and 4K wallpapers, phone wallpaper, Instagram post and portrait, YouTube thumbnail, presentation and A4 print — as PNG, or as a vector SVG at any size.
Can I use it on my website?
Yes — “Copy CSS” gives you the exact gradient as CSS to paste into your site.
Can I add text on top?
Yes — “Use in a design” opens the gradient as a background in the editor.