◉◎
Mesh Gradient Generator
Soft multi-color “aurora” backgrounds in pure CSS.
Runs entirely in your browser. Nothing is sent anywhere.
How it works
- 1Paste or type your text.
- 2Choose the options you need.
- 3Copy or download the result.
About this tool
Mesh Gradient Generator: Soft multi-color “aurora” backgrounds in pure CSS. Paste your text and the result appears immediately, ready to copy or download. Everything happens locally in your browser — nothing you paste is uploaded or stored.
Example
Input
#0f172a #7c3aed #ec4899 #22d3ee #f59e0b
Output
background-color: #0f172a; background-image: radial-gradient(at 52% 50%, #7c3aed 0px, transparent 62%), radial-gradient(at 36% 92%, #ec4899 0px, transparent 47%), radial-gradient(at 98% 83%, #22d3ee 0px, transparent 58%), radial-gradient(at 19% 18%, #f59e0b 0px, transparent 61%);
How do I use the Mesh Gradient Generator?
Paste or type your text. Choose the options you need. Copy or download the result.
Is the Mesh Gradient Generator free?
Yes. It is completely free with no sign-up, no usage limits and no watermark.
Is my data sent to a server?
No. Everything is calculated locally in your browser. Nothing you enter is uploaded, logged or stored.
Does it work on my phone?
Yes. It works in any modern browser on Android, iPhone, iPad, Windows, Mac and Linux — no app needed.