Mesh Gradient Generator
Choose four colors and positions to preview a smooth radial mesh gradient without uploading anything.
Choose four colors and positions.
A QUICK WALKTHROUGH
How to use this tool
- Choose four colors and adjust their positions.
- Preview the CSS mesh gradient.
- Copy the CSS or download it as a file.
Browser-native output
The preview uses CSS radial gradients layered together. The generated declaration contains only the selected colors and percentages and can be pasted into a stylesheet.
Local processing
Color choices, preview, copying, and download happen in your browser. No image or color data is uploaded.
GOOD TO KNOW
Common questions
Is this a bitmap image?
No. The result is CSS that renders a responsive gradient in the browser.
Can I use the CSS commercially?
Yes. The generated CSS is your output; review your chosen color assets separately.
How many colors are supported?
This focused generator uses four radial color stops.