CSS gradient generator
Generated in your browser · nothing is uploaded
Builds a `linear-gradient`, `radial-gradient` or `conic-gradient` with as many colour stops as you want, previewed live, and gives you the CSS that produced exactly what you are looking at.
How to use the css gradient generator
The angle in a CSS linear gradient is not the angle you may expect. 0deg points up and the angle turns clockwise, so 90deg runs left to right and 180deg runs top to bottom. That is the opposite convention to most maths and to SVG, and it is why a gradient copied from a design tool often comes out mirrored.
The part worth understanding is interpolation. A gradient between two colours is a straight line through a colour space, and by default that space is sRGB, which is why blue to yellow passes through a muddy grey rather than through green. The fix is to name a better space: linear-gradient(in oklch, blue, yellow) keeps the lightness even and passes through colours a person would expect. Support is now broad, and the difference on a two-colour blend is dramatic.
One thing to watch: a gradient with hard stops; two stops at the same position. Makes stripes rather than a blend, and that is the standard way to build a striped or split background without an image. Put two stops at 50% with different colours and you have a two-tone panel.
Questions
In CSS 0deg points up and the angle turns clockwise. 90deg is left to right. Most design tools use the opposite convention.
Interpolation happens in sRGB by default and passes through grey. Add `in oklch` after the angle for a blend that keeps its lightness.
Put two stops at the same position. The colour changes abruptly, which is how CSS-only stripes are made.
Not the gradient itself: it is not an animatable value. Animate background-position on an oversized gradient instead.
Yes. The preview element uses the CSS shown below it, unchanged.