Mesh gradient guide
What is a mesh gradient?
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.
How to make one
- Start with a palette. Pick a preset or make a new mesh. Select any point to change its HEX value.
- Move the light. Drag the points on the preview. Increase spread for fuller color fields, then raise softness when the edges feel too obvious.
- Take the result. Copy CSS for a web background, copy SVG for a scalable file, or download a PNG for slides and social posts.
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.
