Free Design Tool
CSS Gradient Generator
Pick your colors, choose a gradient type, and copy the ready-to-use CSS code for your website or blog instantly.
Color Stops (2)
#7008e7
#ff2056
Linear gradient with 2 color stops at 135degLive Preview
LinearGradient Type
2Color Stops
135degAngle
Preview
Generated CSS Code
background: #7008e7;
background: linear-gradient(135deg, #7008e7, #ff2056);
Preset Gradients
| Name | Preview | Type | Colors | Action |
|---|---|---|---|---|
| Sunset | Linear | |||
| Ocean | Linear | |||
| Forest | Linear | |||
| Purple Haze | Linear | |||
| Golden | Linear | |||
| Midnight | Linear | |||
| Peach | Linear | |||
| Radial Blue | Radial | |||
| Conic Wheel | Conic |
CSS gradient tips
Use 135deg for diagonal gradients that feel dynamic
Radial gradients work great as button hover backgrounds
Add a solid fallback color before the gradient for older browsers
Keep 2 to 3 stops for clean, readable gradients
Use low-contrast gradients for backgrounds behind text
Conic gradients are perfect for pie charts and color wheels
