CSS Gradient Generator
Create beautiful CSS gradients with a visual editor. Pick colors, set directions, and copy ready-to-use CSS code.
Angle:135°
Color Stops
Position:0%
Position:100%
background: linear-gradient(135deg, #7c6cf0 0%, #00e676 100%);
Preset Gradients
How It Works
1
Choose Colors & Direction
Pick your gradient colors with the color pickers, choose linear or radial, and set the direction or angle.
2
Preview in Real Time
See your gradient update instantly as you adjust colors, positions, and angles. Try preset gradients for inspiration.
3
Copy the CSS
Click Copy CSS to grab the generated code. Paste it directly into your stylesheet or inline styles.