Can I copy the CSS gradient code?

Yes. Click the Copy CSS button to copy the full background property value to your clipboard. Paste it directly into your CSS file.

What gradient types does this tool support?

The tool supports linear-gradient, radial-gradient, and conic-gradient, which cover the three main CSS gradient types used in web design.

How do I download the gradient as an image?

Click the Download PNG button to save the gradient as an 800x600 PNG file. You can then use it in any design tool or as a website asset.

Can I add more than two color stops?

Yes. Click Add Stop to insert additional color stops. Each stop has its own color picker and position slider. You can add as many stops as you need.

Will the generated gradient work in all browsers?

Linear and radial gradients work in all modern browsers including Chrome, Firefox, Safari, and Edge. Conic gradients are supported in all major browsers as of 2021.

Images Tool Box

Utilities

CSS Gradient Generator Online Free

Build stunning linear, radial, and conic CSS gradients in seconds. Add multiple color stops, adjust angles, copy the ready-to-use CSS code, or download a PNG. No sign-up required.