CSS Gradient Generator

This tool supports all three CSS gradient types: linear-gradient (directional), radial-gradient (circular/elliptical from a center point), and conic-gradient (rotating around a center). You can also toggle the repeating variant for any type.

Click the 'Add Stop' button to add a new color stop. You can have up to 8 stops. Each stop has its own color picker, position slider (0–100%), and opacity control.

Yes! Click the 'Copy CSS' button to copy the complete CSS rule (background property) to your clipboard. You can paste it directly into your CSS file or inline style.

Linear and radial gradients have near-universal browser support (99%+). Conic gradients are supported in all modern browsers including Chrome, Edge, Firefox, and Safari. They do not require any vendor prefixes in modern CSS.