Can I use more than two color stops?

Yes. Click 'Add stop' to add as many color stops as you need. Each stop has its own color picker and position percentage.

What CSS property is generated?

The tool outputs a complete background shorthand property, e.g. background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); — ready to paste into your stylesheet.

CSS Gradient Generator — Linear and Radial with Live Preview

All tools › CSS Gradient Generator ● Live Developer Tools

Settings

Angle135°

Color stops

CSS output

background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

Settings

CSS output

More Developer Tools tools

CSS Border Radius Generator

CSS Box Shadow Generator

.dockerignore Generator

.gitignore Generator

.htaccess Redirect Generator

Aspect Ratio Calculator