CSS Gradient Generator
Build linear and radial gradients visually and copy the CSS.
About the gradient generator
Pick colours, drag the stops, set the angle, and copy the CSS. Linear and radial gradients are both supported, with as many colour stops as you need, a set of ready-made presets, and a random button for when you want a starting point rather than a decision.
The preview is the actual CSS applied to a real element, not an image of one β so what you see is exactly what the copied code produces.
Reading the syntax
linear-gradient(135deg, #2f6df6 0%, #7c3aed 100%) breaks down as: the angle
the gradient travels in, then each colour with the position along that line where it lands.
Angles run clockwise from upward: 0deg goes bottom to top,
90deg left to right, 180deg top to bottom. This trips people up
regularly, because it is not the same convention CSS transforms use.
A radial gradient replaces the angle with a shape and a centre:
radial-gradient(circle at center, β¦). Use ellipse when you want
it to stretch with the element rather than stay round.
Making gradients that look good
- Keep hues close. Colours near each other on the wheel blend cleanly. Opposite hues pass through a muddy grey in the middle.
- Two or three stops is usually plenty. More tends to read as busy rather than rich.
- Watch the contrast. If text sits on top, check it against both ends, not just the middle β the colour converter has a WCAG contrast check for exactly this.
- Banding shows up on large areas with very close colours, especially on older displays. Widening the difference between stops usually clears it.
Frequently asked questions
How do I create a CSS gradient?
Set the colours and angle above and copy the generated line β for example background: linear-gradient(135deg, #2f6df6 0%, #7c3aed 100%);. Paste it into your stylesheet on the element you want it applied to.
What is the difference between linear and radial gradients?
A linear gradient blends along a straight line at the angle you set. A radial gradient blends outward from a point, either as a circle or an ellipse, which suits spotlights and soft background glows.
Which way does 0deg point in a CSS gradient?
Upward. Angles increase clockwise, so 90deg runs left to right and 180deg top to bottom. It is a different convention from CSS transforms, which is a common source of confusion.
Can I use more than two colours?
Yes β add as many stops as you like and position each one along the gradient. Two or three usually looks best; beyond that gradients tend to read as busy.
Why does my gradient look banded?
Banding appears when a large area is filled with colours that are very close together, particularly on displays with limited colour depth. Widening the difference between the stops normally fixes it.