Create CSS gradients without guessing the syntax
CSS gradients replace background images for colour transitions: they weigh nothing, scale to any size and can be changed with a line of code. The syntax, though, is easy to get wrong once you mix angles, positions, shapes and stops with transparency. This generator lets you build the gradient visually and gives you the exact CSS.
It supports the three types of gradient. Linear gradients go in a straight line at the angle or direction you choose. Radial gradients spread out from a point, as a circle or an ellipse, at the position you set. Conic gradients rotate colours around a centre, which is how pie charts and colour wheels are made in pure CSS. You can add as many colour stops as you need and set the colour, opacity and position (in %) of each.
Start from a preset or from scratch, watch the live preview while you adjust, and copy a ready-to-paste background: linear-gradient(...) declaration (or radial-gradient / conic-gradient). The output works in all current browsers.
Gradients also replace many decorative images: a background gradient adds no extra HTTP request, stays crisp on high-density screens and is easy to tweak later, for example to match a new brand colour. With opacity on each stop you can lay a gradient over a photo to make text on top of it easier to read, or combine several gradients in one background for richer effects. The generator runs entirely in your browser and is free to use without limits: no sign-up and no Pro needed.
How to create a CSS gradient
- Choose the type: linear, radial or conic, or start from a preset.
- Set the angle or direction, or the shape (circle or ellipse) and position for radial gradients.
- Add colour stops and adjust each one's colour, opacity and position.
- Check the live preview and click Copy CSS.
Where to use CSS gradients
- Hero sections and page backgrounds.
- Buttons and call-to-action hover states.
- Overlays on images to keep text readable (dark to transparent).
- Gradient borders and text effects combined with background-clip.
- Pie charts and colour wheels with conic gradients.
- Subtle section dividers and card backgrounds.
Gradient syntax in a nutshell
- linear-gradient(90deg, #ff7a18 0%, #af002d 100%): left to right; 0deg goes bottom to top and angles turn clockwise.
- linear-gradient(to bottom right, ...): a direction keyword instead of an angle.
- radial-gradient(circle at 30% 40%, ...): a circle centred at that point; ellipse is the default shape.
- conic-gradient(from 0deg at 50% 50%, red, yellow, red): colours turn around the centre.
- Two stops at the same position, like red 50%, blue 50%, create a hard edge instead of a fade.
Fading to transparent
To fade a colour out, fade to the same colour with zero opacity, for example rgba(0, 0, 0, 0.6) to rgba(0, 0, 0, 0), rather than to the keyword transparent. Setting the opacity per stop in the generator does exactly that, and it avoids greyish bands in the middle of the gradient.
Frequently Asked Questions
Is the gradient generator free?
Yes. The CSS generators are free to use without limits, with live preview and Copy CSS.
What is the difference between linear, radial and conic?
Linear changes colour along a line, radial from a centre point outwards, and conic around a centre point, like the hands of a clock.
How many colour stops can I add?
As many as you need, each with its own colour, opacity and position.
Do CSS gradients work in all browsers?
Linear, radial and conic gradients are supported by all current browsers.
Can I use the gradient as a text colour?
Yes: apply it as background, then add background-clip: text and color: transparent to the text element.