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.
Fun facts about CSS Gradient Generator
- WebKit introduced CSS gradients in 2008; the standard, unprefixed syntax reached all major browsers around 2012-2013.
- The conic-gradient() function sweeps colours around a centre point, like a colour wheel or pie chart; it has been supported in all major browsers since 2020.
- CSS gradients are rendered by the browser, not as images — they scale perfectly to any resolution and don't require HTTP requests.
- The `repeating-linear-gradient()` function can create patterns like stripes, plaid, and checkerboards using only CSS.