How many color stops can I add?

You can add up to 10 color stops. Each stop has its own color and position (0%-100%) along the gradient.

Does the output include vendor prefixes?

The output includes the standard linear-gradient() syntax. Modern browsers do not need -webkit- or -moz- prefixes for linear gradients.

Yes. Set the angle to 45deg for a diagonal gradient, or use the direction keywords like to top right in the angle field.

Yes. Use the CSS Radial Gradient Generator for circular and elliptical gradient effects.

Pick colors and an angle to generate ready-to-paste CSS linear-gradient code.

From

Direction

Last updated: 2026-06-09 · Reviewed by Nham Vu