CSS Gradient Generator
Build linear and radial CSS gradients visually with multiple colour stops, live preview and copy-ready CSS output.
0° points up, and angles increase clockwise.
background: linear-gradient(135deg, );
About CSS Gradient Generator
Design a gradient by dragging colour stops and watching the result update live, then copy the CSS. Supports linear and radial types, any angle, and as many stops as you need — plus a randomiser for when you want a starting point rather than a blank canvas.
How to use it
- Choose linear or radial.
- Add, drag and recolour the stops.
- Set the angle or radial shape.
- Copy the generated CSS.
Frequently asked questions
Which angle does 0deg point to?
In CSS, 0deg points up and angles increase clockwise. So 90deg runs left to right and 180deg runs top to bottom.
Why does my gradient look muddy in the middle?
Blending between complementary colours passes through grey in sRGB. Add an intermediate stop in a related hue, or pick colours closer together on the wheel.
Do I need vendor prefixes?
Not any more. Unprefixed linear-gradient and radial-gradient have been supported in every major browser for over a decade.
Trending guides
In-depth reads that go beyond the calculator.
- Trending6 min read
SIP Calculator guide
A Systematic Investment Plan is a standing instruction to put a fixed amount into a mutual fund on the same date each month. That is the whole idea. It is not a product you buy, not an asset class, and not a scheme with a guaranteed rate — it is a schedule. The returns come from whatever the underlying fund holds.
- 3 min read
BMI Calculator guide
Body Mass Index is weight in kilograms divided by height in metres squared. That is the whole calculation. It was devised in the 1830s by the Belgian statistician Adolphe Quetelet, who was explicitly describing populations rather than assessing individuals — a distinction that matters enormously and gets lost constantly.
- 3 min read
Percentage Calculator guide
Almost every percentage problem is one of four shapes. Knowing which one you are looking at is most of the work, because each has a different formula and mixing them up is where the wrong answers come from.