CSS Gradient Generator
Build linear and radial gradients visually — pick colors, set the angle, copy the CSS.
Create CSS linear and radial gradients visually: pick two or three colors, set the angle, and watch the preview update live. Copy the ready-to-use CSS background property — no design tool needed.
How to use the CSS Gradient Generator
- Choose linear or radial and pick your colors.
- Drag the angle slider and adjust the stops.
- Copy the CSS line into your stylesheet.
Frequently asked questions
How do I make a CSS gradient?
Pick colors above and the tool outputs a ready background property — for example linear-gradient(135deg, #ff9a56, #e8562a).
What is the difference between linear and radial gradients?
Linear gradients progress along a straight line (defined by the angle); radial gradients spread outward from a center point.
Can I use more than two colors?
Yes — enable the third color stop for a richer gradient, or hand-edit the output to add more.
Do CSS gradients work on all browsers?
Modern browsers all support the unprefixed linear-gradient() and radial-gradient() syntax.