CSS Gradient Generator
This CSS gradient generator builds linear, radial and conic gradients with as many colour stops as you need, previewing the result at full size as you adjust it. Stops are sorted by position automatically, because a gradient with stops out of order behaves in ways that look exactly like a rendering bug — the browser clamps each stop to be no earlier than the one before it, producing hard edges where you expected a blend. Repeating gradients tile the stop sequence rather than stretching it once across the element, which is how stripes, progress bars and hazard patterns are made from a two-stop definition.
How it works
Builds linear, radial and conic gradients with as many colour stops as you need. Stops are sorted by position automatically, since a gradient with stops out of order behaves in ways that look like a bug.
Repeating gradients tile the stop sequence rather than stretching it, which is how stripe and progress patterns are made.
Everything runs in your browser — nothing you enter is sent to a server.
Angles in linear gradients
| Angle | Direction |
|---|---|
| 0deg | Bottom to top |
| 90deg | Left to right |
| 180deg | Top to bottom |
| 270deg | Right to left |
The angle points in the direction the gradient ends, measured clockwise from up — which is the opposite of what most people assume the first time.
Hard stops
Two stops at the same position produce an instant colour change rather than a blend:
background: linear-gradient(90deg, #6366f1 0%, #6366f1 50%, #ec4899 50%, #ec4899 100%);That is how flags, segmented progress bars and stripe patterns are built without images.
Banding
Long, subtle gradients between similar colours often show visible bands, because there are not enough distinct colour values across the distance. Adding a very slight noise texture on top, or choosing colours that differ in hue as well as lightness, hides it.
Frequently asked questions
How do the angles work?
In a linear gradient the angle is the direction the gradient travels: 0deg goes bottom to top, 90deg left to right, 180deg top to bottom. It is measured clockwise from pointing up.
What is a conic gradient?
One that sweeps around a centre point rather than travelling across the element. It is what pie charts and colour wheels are made from.
Why do stops get sorted?
Because a stop earlier than the one before it is clamped by the browser, producing a hard edge rather than a blend. Sorting means the preview matches what you intended.
What does repeating do?
It tiles the stop sequence across the element instead of stretching it once, so a two-stop gradient becomes a stripe pattern.
How do I make a hard-edged stripe?
Put two stops at the same position. The colour changes instantly there rather than blending, which is how you build flags, stripes and segmented bars.
Is anything uploaded?
No. Everything runs in your browser.
Related tools
CSS Box Shadow Generator
This box shadow generator stacks multiple layers with a live preview.
Color Converter (HEX / RGB / HSL / HSV / CMYK)
A color converter for HEX, RGB, HSL, HSV and CMYK, with a built-in WCAG contrast checker.
Glassmorphism CSS Generator
This generator builds the frosted-glass effect with backdrop blur and a live preview.