Both. Linear uses an angle (0–360°); radial uses a circle or ellipse centered at the box. Each supports unlimited color stops.

Can I add more than 2 color stops?

Yes. Click "Add color stop" to insert additional colors at any position (0–100%).

Does the output CSS work in all browsers?

Yes. Modern CSS gradients are supported in all browsers from 2012+. No vendor prefixes needed.

Copy the CSS directly. To save, paste it into your stylesheet — there's no account or cloud storage.

Preparing private browser tool…

Your file will stay on this device.

Linear or radial?: Both. Linear uses an angle (0–360°); radial uses a circle or ellipse centered at the box. Each supports unlimited color stops.
Can I add more than 2 color stops?: Yes. Click "Add color stop" to insert additional colors at any position (0–100%).
Does the output CSS work in all browsers?: Yes. Modern CSS gradients are supported in all browsers from 2012+. No vendor prefixes needed.
Can I save or share a gradient?: Copy the CSS directly. To save, paste it into your stylesheet — there's no account or cloud storage.