Create beautiful gradient mesh backgrounds. Click any control point to change its color, use presets, or randomize. Export as PNG or copy CSS.
Click any colored circle to change that control point's color
background: radial-gradient(ellipse at 0% 0%, #00E5FF 0%, transparent 70%), radial-gradient(ellipse at 50% 0%, #00BCD4 0%, transparent 70%), radial-gradient(ellipse at 100% 0%, #0097A7 0%, transparent 70%), radial-gradient(ellipse at 0% 50%, #1565C0 0%, transparent 70%), radial-gradient(ellipse at 50% 50%, #0D47A1 0%, transparent 70%), radial-gradient(ellipse at 100% 50%, #1976D2 0%, transparent 70%), radial-gradient(ellipse at 0% 100%, #004D40 0%, transparent 70%), radial-gradient(ellipse at 50% 100%, #00695C 0%, transparent 70%), radial-gradient(ellipse at 100% 100%, #00897B 0%, transparent 70%);
The mesh is created using bilinear interpolation across a 3×3 grid of color control points. Each pixel's color is smoothly blended from its four nearest corner colors. The CSS output uses overlapping radial gradients as an approximation suitable for web use. Download the PNG for pixel-perfect results in design tools.
Yes, Gradient Mesh Generator is completely free to use on UtilityCove.
No. Gradient Mesh Generator runs in your browser, so your input stays on your device.
Yes. Gradient Mesh Generator works on modern mobile and desktop browsers.
CSS Gradient Generator
Create linear CSS gradients with a live preview.
CSS Box Shadow Generator
Build and preview CSS box-shadow values with one-click copy.
CSS Glassmorphism Generator
Generate frosted-glass CSS with backdrop blur and copy-ready styles.
QR Code Generator
Generate custom QR codes for any text or URL.
WiFi QR Code Generator
Generate a scannable QR code to share WiFi credentials instantly.
Letter Profile Picture
Generate avatar images from initials with custom colors.