4 Color PointsDraggablePure CSSCopy Code
Color Points
1#ff6b6b(25%, 25%)
2#4ecdc4(75%, 25%)
3#45b7d1(25%, 75%)
4#96ceb4(75%, 75%)
background:
radial-gradient(circle at 25% 25%, #ff6b6b 0%, #ff6b6b00 70%),
radial-gradient(circle at 75% 25%, #4ecdc4 0%, #4ecdc400 70%),
radial-gradient(circle at 25% 75%, #45b7d1 0%, #45b7d100 70%),
radial-gradient(circle at 75% 75%, #96ceb4 0%, #96ceb400 70%);How It Works
1
Pick Colors
Choose 4 colors for your mesh gradient points.
2
Position Points
Drag color points on the grid to create your desired blend.
3
Copy CSS
Click Copy to get the layered radial-gradient CSS code.
Frequently Asked Questions
What is a mesh gradient?
A mesh gradient uses multiple overlapping radial gradients to create smooth, multi-color transitions similar to Figma or Sketch mesh gradients.
How do I position colors?
Drag the 4 color points on the preview grid to position each color. The CSS updates in real time.
Is the output pure CSS?
Yes. The mesh effect is achieved using layered CSS radial-gradients. No images or SVGs needed.
Can I change the colors?
Yes. Click each color point to change its color using the color picker.
Love this tool? Explore 999+ more
Free online tools for images, PDFs, text, code, and more. All running in your browser.
Explore All Tools