Gradient playground
Place color points, drag them around, and shape a soft mesh in real time. Copy reusable CSS or take the result as SVG or PNG.
Step one
Step two
background-color: #FFF0D9; background-image: radial-gradient(circle at 16% 24%, #FF704D 0%, #FF704D 15%, transparent 66%),radial-gradient(circle at 77% 20%, #FFB43A 0%, #FFB43A 15%, transparent 66%),radial-gradient(circle at 78% 78%, #A54BFF 0%, #A54BFF 15%, transparent 66%),radial-gradient(circle at 28% 74%, #FF5DA2 0%, #FF5DA2 15%, transparent 66%);Test drive
The same mesh fills six practical layouts. Move a point above and every example changes with it.
Next up
Mesh gradient guide
A mesh gradient spreads several colors from separate points instead of drawing one straight transition. The colors overlap, fade, and form soft pockets across the surface. That makes a mesh feel closer to light passing through fabric than a standard two-color gradient.
Use one behind large type, inside a product card, or as a quiet page background. Four points are usually enough. Add more only when an empty area needs a new color.
Distance matters as much as color. Nearby points make a concentrated glow. Pull them apart when the middle turns muddy, or place one just beyond an edge to let its color enter the frame without taking over.
Need a tighter set first? Build one with the color palette generator. Check an opposite tone in the invert colors tool, then adjust exact values with the HEX colors picker.