Mesh gradients are live
Mesh Gradient Generator
Design eye-catching mesh gradients for web design and illustration projects. Randomize, fine-tune color stops, and download your mesh as a ready-to-use image.
PNG · responsive preview
Live mesh previewStop 1 · x 25% · y 30% · size 55%
CSS background
/* Mesh CSS will appear here in the browser */
Mesh controls
Choose a base color and fine-tune each color stop. Drag the numbered handles directly in the preview or use the sliders below.
Edit target
Base background
bg-slate-950
Color stops
Stop 1 position & size
X position25%
Y position30%
Radius55%
Hex values
Base
--How to use
- Drag the numbered handles or adjust sliders to place color stops.
- Use the Tailwind playground to pick on-brand colors.
- Copy the CSS background or download the PNG for your design.