CSS Gradient Generator

Design and generate CSS linear/radial gradients.

Preview
CSS Output
background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);
Settings
90°
0%
100%
Info

Drag the sliders to adjust color positions. You can have up to 5 color stops for complex gradients.

About this Tool

CSS gradients let you display smooth transitions between two or more specified colors. This generator supports both linear and radial gradients, allowing you to visually design complex backgrounds and instantly copy the CSS code.

Frequently Asked Questions

Previous
Image to Base64Design & Style
Next
SQL FormatterWeb Utilities