CSS Gradient Generator

Linear gradients: Colors transition in a straight line at any angle
Radial gradients: Colors radiate outward from a center point
Color stops: Define where each color appears in the gradient

Create beautiful CSS gradients with a visual editor. Copy the CSS code instantly.

CSS Code

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Presets

Angle: 90°

0°90°180°270°360°

100%

How to Use CSS Gradients

CSS gradients let you create smooth transitions between colors. They can be used for backgrounds, buttons, and other elements to add visual depth.