CSS background tool
Design visually.
Ship as CSS.
Compose a rich gradient on canvas, then copy a clean layered CSS background for your site — no dependencies and no account.
Open the free studioFree browser studio
Edit every color point.
Drag the color points directly on the canvas. Every change stays editable, private and ready to export.
Drag points to compose · Double-click the canvas to add color
Practical guide
Create backgrounds that are ready to ship.
CSS mesh gradients are layered
A true freeform gradient mesh is not available as one universal CSS property. The practical technique is to layer several radial gradients over a base color. Each layer places a soft color field at a percentage position, making the result responsive without a background image.
Keep production code readable
Start with three or four layers and test the background at the smallest and largest container sizes. More layers can improve detail, but they also make the declaration harder to maintain. This studio keeps the output explicit so you can change individual colors later.
Plan a visual fallback
If exact rendering matters across browsers and color spaces, export an image or SVG fallback. CSS is the lightest option, while raster and vector assets are more predictable for campaign graphics or approved brand artwork.
Common questions
Know what you are exporting.
Does the editor upload my design?
No. Editing and current exports happen locally in your browser.
Can I use the result commercially?
Yes. You can use gradients you create in personal and commercial work.
Which export should I choose?
Use CSS for lightweight web backgrounds, SVG for scalable design assets, and PNG for the most predictable visual result.