How to Use This Tool
A CSS gradient is one line of code, which is why gradient generators are everywhere. What almost none of them tell you is why your gradient looks muddy in the middle — and that is the only part of this subject that is not obvious.
The grey dead zone
By default the browser interpolates between two colours by moving in a straight line through sRGB space. When the two colours sit on roughly opposite sides of that space — blue to yellow, red to green, purple to lime — the straight line passes near the neutral axis, and saturation collapses in the middle. You asked for blue to yellow and got blue, grey, yellow.
There are two fixes, and both are shown live above:
- Add a mid stop. Insert a colour roughly a third of the way round the hue circle between the two ends, at the 50% position. This bends the path away from the neutral axis. Blue to yellow becomes blue, teal, yellow.
- Interpolate in oklab. Modern browsers accept
linear-gradient(in oklab, blue, yellow), which interpolates in a perceptually uniform space and maintains chroma through the middle without any extra stop. Support is good in current browsers but not universal, so the tool emits the plain version first and the oklab version as an optional upgrade.
The three gradient types
Linear runs along a straight line at whatever angle you set; 0deg points up
and the angle increases clockwise, which catches people out because it is the opposite of the mathematical
convention. Radial spreads outward from a point, which is what you want for spotlights and
soft page backgrounds. Conic sweeps around a point like a clock hand, and is the only one
of the three that can produce a colour wheel or a pie chart in pure CSS.
Stop positions matter more than colours
A gradient with stops at 0% and 100% is a slow, even wash. Moving the stops closer together produces a sharp transition with flat colour on either side, and placing two stops at the same position produces a hard edge with no blending at all — which is how you make stripes in CSS without images.
A performance note
Gradients are cheap to paint but not free, and animating one by changing its colour stops forces a repaint
on every frame. If you need a moving gradient, animate background-position on an oversized
gradient, or transform a pseudo-element instead. Both stay on the compositor and cost almost nothing.
