Mesh Gradient Generator

Build soft blurred mesh gradients for hero sections, cards, and app backgrounds.

Gradient Stops

CSS

background-color: #0f172a;
background-image: radial-gradient(circle at 18% 20%, #0ea5e9 0%, transparent 44%), radial-gradient(circle at 82% 24%, #22c55e 0%, transparent 44%), radial-gradient(circle at 22% 78%, #f97316 0%, transparent 44%), radial-gradient(circle at 78% 76%, #e11d48 0%, transparent 44%);