CSS Gradient Generator
Design smooth CSS gradients visually and copy code that just works.
How to use the CSS Gradient Generator
- Choose linear, radial or conic, or start from one of the presets.
- Set the angle or centre, and adjust each colour and its position.
- Switch blending to OKLCH for vivid gradients without a muddy middle.
- Copy the CSS rule or just the value, or save the gradient as a PNG.
About this tool
CSS gradients paint smooth colour transitions without any image file, so backgrounds load instantly and stay sharp on every screen. There are three kinds: linear gradients run in a straight line at any angle, radial gradients spread out from a centre point, and conic gradients sweep around a centre like the hands of a clock, which is handy for pie-style charts and colour wheels.
A common problem is the grey, washed-out band that appears when two strong colours blend, for example blue into yellow. Modern browsers can blend in OKLCH or OKLab instead of classic sRGB, which keeps the middle bright and even. Choose one of those and the generated CSS includes a plain fallback line first, so older browsers still show a normal gradient.
Repeating gradients turn a few colour stops into patterns such as stripes. Give two neighbouring stops the same position to get a hard edge instead of a blend; the Stripes preset shows the idea.
Frequently asked questions
How do I make a hard line instead of a blend?
Place two colours at the same position, for example red at 50% and blue at 50%. The gradient jumps straight from one to the other, which is how stripes and split backgrounds are made.
What does blending in OKLCH do?
It mixes colours in a space designed around human vision, so the transition keeps its brightness and saturation instead of passing through grey. Browsers released from 2023 onwards support it; older ones use the fallback line.
Which angle does 0 degrees point to?
In CSS, 0deg points upwards, so the gradient runs from bottom to top. 90deg runs left to right and 180deg top to bottom. Conic gradients start their sweep at the angle you set.
Why does the PNG look slightly different?
The PNG is drawn with the browser's canvas, which always blends in sRGB and cannot repeat patterns. Use the CSS for the exact result on web pages.
Is my design saved or uploaded?
Your current gradient is remembered in this browser so it is still there next time. Nothing is uploaded.