A mesh gradient generator for soft, blended backgrounds
A mesh gradient blends several colours across a surface instead of along one line, giving the soft, aurora-like backgrounds you see on modern landing pages, app splash screens and album covers. This mesh gradient generator lets you place up to eight colour points, drag them where you want them, set how far each colour spreads, and add a film-grain texture.
You get two renderings. CSS layers stacks one radial-gradient() per point over a base colour — the widely used technique for mesh-style backgrounds in pure CSS, with nothing to download. Smooth mesh calculates a true multi-point blend on a canvas, where every pixel is a weighted mix of all the points, for an even silkier result you can export as a PNG at any size up to 8000 px.
A seed makes every random design reproducible: note the number, and you or a teammate can regenerate exactly the same palette and layout later.
How to use the Mesh Gradient Generator
- Press Randomise for a fresh palette, or type a number and press Use seed to recreate a design.
- Drag the round handles on the preview to move colours. Click a handle and use the arrow keys (Shift for bigger steps) for precise moves.
- Change each point’s colour and spread in the list, add points (up to eight) or remove them, and set the Base colour underneath.
- Add Grain for a printed, tactile look, and switch between CSS layers and Smooth mesh to compare.
- Press Copy CSS for your stylesheet, or choose an image size and download a PNG or SVG.
Mesh Gradient Generator features
Draggable colour points
Mouse, touch and keyboard all move points; the CSS updates live as you drag.
Two rendering methods
Layered radial gradients for CSS, and a Gaussian-weighted canvas blend in linear light for the smooth mesh.
Seeded randomiser
A small PRNG (mulberry32) turns a seed into positions and an analogous-plus-accent palette, so results are repeatable.
Grain without images
The CSS adds an SVG feTurbulence noise layer as a data URI; PNG exports add matching per-pixel noise.
Export at any size
PNG up to 8000 × 8000 px with presets for Full HD, 4K, phone wallpapers and 1200 × 630 social cards, plus an SVG built from real SVG radial gradients.
How the CSS mesh gradient works
CSS has no native mesh gradient, so the standard workaround is to stack radial gradients. Each point becomes radial-gradient(at 20% 30%, #ff6b9d 0px, transparent 50%): full colour at the point, fading to transparent halfway along the gradient ray. Because the default shape is an ellipse sized to the farthest corner, each blob stretches with the element. The first layer in the list sits on top, and the background-color shows through wherever every layer has faded out.
The SVG export reproduces exactly that geometry with SVG radialGradient elements, ellipse radii and stop positions included, so the file looks like the CSS preview at any size.
How the smooth mesh is calculated
In smooth-mesh mode each pixel’s colour is a weighted average of all the points. The weight of a point is a Gaussian of its distance, exp(−d² / σ²), where σ grows with the point’s spread and the softness slider; the base colour always carries a small weight so empty corners do not go grey. Mixing happens in linear light (sRGB gamma removed first) so that blends between saturated colours stay bright instead of muddy. The blend is computed at a reduced size and scaled up with high-quality smoothing, which is invisible on a gradient this soft and keeps 4K exports fast.
Design tips
- Three to five points is the sweet spot; more points tend to average into a muddy middle.
- Pick neighbouring hues plus one accent — the Color Palette Generator can suggest a set.
- Put text on the calmest area and test its contrast with the Contrast Checker; frosted cards from the Glassmorphism Generator sit well on top.
- Grain between 8% and 15% hides colour banding on large screens without looking dirty.
- For social share images, export at 1200 × 630 and add a title with the OG Image Maker.
Mesh Gradient Generator FAQ
What is a mesh gradient?
A mesh gradient blends colours from several points in two dimensions, unlike a linear gradient that blends along a single line. Design apps build them from a grid of colour points; on the web they are usually approximated with layered radial gradients.
Can I use the mesh gradient generator output in Tailwind?
Yes. Put the two declarations in a CSS class, or use arbitrary properties such as [background-image:radial-gradient(...)]. A plain class is easier to read for four or more layers.
Why does the smooth mesh look different from the CSS version?
They are different maths. CSS layers fade each colour to transparent on top of the others, so the top layers dominate; the smooth mesh weights all points equally by distance. Use the one you like — the PNG follows your choice.
Does grain slow the page down?
The CSS grain is a small SVG noise image the browser renders once per element size. It is cheap for backgrounds; avoid it on elements that animate their size every frame.
How do I get the same random gradient again?
Write down the seed shown next to the Randomise button. Typing it back and pressing Use seed rebuilds the identical points, colours and base.
Are my gradients uploaded anywhere?
No. The preview, CSS, PNG and SVG are all generated in your browser.