CSS Gradient Generator
Mix two or three colors, dial the angle, switch modes, and copy production-ready CSS.
Live Preview
The preview updates as you tweak the stops.
Linear
2 Stops
90deg
Preview Surface
Sample Hero
Launch a brighter interface with a gradient that already feels production-ready.
Primary Action
Secondary Link
Controls
Shape the gradient
90deg
Angle applies to linear gradients.
Enable 3 colors to use this middle stop.
Output
Copy CSS
Your gradient CSS updates instantly.