Mesh Gradients in Web Design: Why SVG Backgrounds Win

Soft, fluid mesh gradients are everywhere in modern web design. Learn why SVG beats JPG and PNG for them, and how to make one for free in your browser.

Look at the landing pages of new apps and you will see them: soft pools of colour that melt into each other behind the headline. These are mesh gradients. Unlike a straight linear or round radial gradient, a mesh blends several colours from several points, which gives that liquid, glowing look.

• No banding: compressed images show visible steps in smooth gradients. Vector blends stay smooth.
• Tiny files: a full-screen PNG gradient can be several megabytes; the same idea as SVG or CSS is a few kilobytes, which keeps pages fast.
• Any screen: vectors are sharp on a phone, a 4K monitor and a printed banner alike.
• Easy to change: colours are plain values you can edit, animate or switch for a dark theme.

The free Mesh Gradient generator runs in your browser:

1. Place 4 to 6 colour points and pick a colour for each, or start from a preset.
2. Drag the points across the canvas and tune softness, spread, opacity and grain until it feels right.
3. Export as SVG or PNG, or copy a CSS background made of layered gradients that weighs only a few hundred bytes.

• Keep text readable: place headlines over the calmer part of the gradient, or add a soft dark layer behind them.
• Two or three related colours look more refined than five unrelated ones.
• Pull your colours from a product photo with the Color Palette tool so the background matches the brand.

Mesh gradients make great phone wallpapers, slide backgrounds and print-on-demand designs. Export PNG at a large size for print, and SVG or CSS for anything on screen.