tool · one of 51 Pro CSS, SVG and PNG
Mesh gradient
How do I make one of those soft, blurry hero backgrounds?
The soft, many-coloured backgrounds on half the landing pages you see are a handful of radial gradients laid over a base colour. This lets you drag those colour fields around a box - up to eight, each with its own colour and reach - start from five presets or a seeded shuffle, add film grain, and paint the result straight onto an element of the page you are on, so it is judged behind the real headline.
Reach it Press ⌘ + K on any tab and type mesh gradient. Ctrl + K on Windows and Linux
in the panel · this one is Pro
What this actually is
colour points dragged into a mesh gradient, painted on the page and saved as css, svg or pngDesigning a hero, a pricing card or a slide background, or replacing a heavy background photo with something that weighs a few hundred bytes of CSS. The PNG comes at the sizes a slide, a social card or a wallpaper needs.
Asked about this tool
3 of themIs the CSS a picture or real gradients?
Real gradients: a radial-gradient per point, layered over a base colour. It scales to any size and weighs a few hundred bytes, which is the reason to use it over a photo.
Why is the grain only in the SVG and the PNG?
CSS has no noise function. The grain is an SVG turbulence filter, so it travels in the SVG and is drawn into the PNG, and the CSS stays a plain gradient.
Does painting it change the site?
No. It is a live edit to the page in this tab with its own undo row, and a reload removes it. Painting is free; the files are the Pro half.
how to use mesh gradient
- Open Mesh gradient and start from a preset, or press Shuffle.
- Drag the points around the box and set each one's colour and reach.
- Select an element on the page and paint the gradient onto it.
- Take it as CSS, as an SVG with the grain, or as a PNG at the size you need.
96 of these · no host permissions · three free audits