All tools/Web & CSS

CSS Gradient Generator

Build a linear or radial gradient visually, then copy the CSS.

Type

Angle: 90°

Stop 1 at 0%

Stop 2 at 100%

CSS

How this works & FAQ

Pick a type, two colors, and where each color stop sits along the gradient. The preview and CSS update live — copy the CSS straight into a background property.