Gradient Maker
Build CSS gradients visually and copy the code instantly.
Generating your palette…
Color 1
Color 2
Color 3 (optional)
Type
Angle (linear / conic)
135°
CSS output
3 gradient types
Linear, radial, and conic.
3-color stops
Add an optional third color for richer gradients.
Ready CSS
Copy the exact CSS property.
Live preview
See the gradient update in real time.
Frequently asked questions
What is a conic gradient?▼
A conic gradient sweeps colors around a center point (like a color wheel). Great for pie charts and circular effects.
Can I use more than 3 colors?▼
The Pro plan supports unlimited color stops. The free plan supports up to 3.
Will this gradient work in all browsers?▼
Linear and radial gradients work in all modern browsers. Conic gradients are supported in Chrome, Firefox, and Safari 12.1+.
What is the best angle for a gradient?▼
135° (diagonal from top-left) is a classic choice. 90° gives a top-to-bottom flow. 45° gives a corner-to-corner effect.