Gradient Generator
Input
Type
Angle: 135°
Color Stops
#3b82f6
#8b5cf6
Preview
Result (CSS)
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
How to use
1.
Choose linear or radial, then add and position color stops
2.
Adjust the angle for linear gradients or tweak stop positions
3.
Copy the ready-to-use CSS gradient string
Common uses
▸
Creating background gradients for web pages or UI elements
▸
Generating CSS for buttons, headers, or hero sections
▸
Experimenting with color combinations visually before committing to code