← Back to tools
CSS Gradient Generator
Create beautiful CSS gradients visually. Adjust colors, stops, angles, and copy the CSS.
Type:
deg
Color Stops (2)
0%
100%
CSS Output
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Presets
About CSS Gradients
Linear gradients transition colors along a straight line defined by an angle.0deggoes upward, 90deggoes right, 180deggoes downward.
Radial gradients radiate outward from a center point. Choose between circle(equal radius) and ellipse(stretches to fit the element).
Color stops define where each color appears along the gradient (0% = start, 100% = end). Add more stops for complex multi-color gradients.