Gradient Generator
Type
Angle: 135°
Color Stops
#3b82f6
#8b5cf6
Preview
CSS
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
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
▸
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
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line (e.g., left to right). A radial gradient radiates colors outward from a center point in a circular or elliptical pattern.
How do I copy the CSS output?
Click the Copy button in the CSS panel header to copy the full CSS background property value, ready to paste into your stylesheet.
Can I add more than two color stops?
Click the Add Stop button to insert a new color stop. You can then adjust its position using the position field for each stop.
Is my data sent to a server?
All gradient generation runs locally in your browser. No data is transmitted anywhere.
What units does the angle use?
The angle is in degrees (0–360). 0deg points upward, 90deg points right, 180deg points down, matching the CSS linear-gradient specification.