Mesh Gradient Background Generator
Layer multiple color points into an aurora-like mesh gradient and copy it as CSS
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
Layer several semi-transparent radial gradients to create the trendy aurora-style mesh backgrounds you see everywhere. Adjust each color point's position, color, and blur to craft a soft background you can copy as pure CSS.
How to use
- Adjust each color point's color and X/Y position with the sliders.
- Add up to eight points with 'Add color point,' or explore combinations with 'Randomize.'
- Set the base background color and blur size to tune the overall mood.
- Grab the background property with the 'Copy CSS' button and paste it in.
FAQ
- Is my work saved to a server?
- No. Adjusting colors and positions and generating the CSS all happen inside your browser, and no information is ever transmitted or stored on a server.
- Is this real CSS, not an image?
- Yes. The result is a pure CSS background property built from several layered radial-gradients. It's not an image file, so it has no file size and stays sharp at any screen size.
- Can I make an animated background?
- This tool creates static background CSS. To add motion, put the copied background on a large element and use CSS animation to slowly shift the background-position or the element itself for a flowing aurora effect.