What is a CSS gradient background?

A CSS gradient creates a smooth transition between two or more colors, used as a background effect on web pages.

Can I add more than 2 colors?

Yes, you can add up to 6 color stops for rich multi-color gradients.

Yes, copy the generated CSS and paste it directly into your stylesheet or inline style.

Tools

Create beautiful CSS gradient backgrounds and copy the code

Angle90°

CSS Output

background: #4F46E5;
background: -webkit-linear-gradient(90deg, #4F46E5, #EC4899);
background: linear-gradient(90deg, #4F46E5, #EC4899);

Presets