About Mesh gradient
Layered radial gradients with CSS and SVG export
How to use
Design smooth multi-point mesh gradients and export them as CSS or SVG for your interface.
Mesh gradient
Four layered radial gradients over a base color. The preview and CSS update together.
What a mesh gradient is
Several radial gradients are layered over a base color. Each color fades to transparent at its own position, producing soft, organic blends without a single visible direction.
Because the layers are independent, you can move one center without changing the rest of the composition.
CSS and SVG output
The CSS version uses background-image with four radial-gradient layers and works in every modern browser. The SVG version is a single portable file for design tools and print.
Frequently asked questions
Why four colors?
Four centers give enough depth for hero sections and cards without becoming muddy. Add more layers by editing the exported code.
How do I keep text readable?
Place text on a calm area, add a translucent panel, and check contrast with the WCAG tool.
Are mesh gradients supported everywhere?
Layered radial gradients in CSS are widely supported. Very old browsers may show only the base color.