CSS Gradient Generator
Two colors, an angle, one line of CSS.
Two colors, an angle, one line of CSS.
How to use it
- Pick two colors. Hex, rgb(), hsl(), oklch() or a CSS name. The gradient runs from the first to the second.
- Set the shape and angle. Linear runs across at the angle you give. Radial spreads from the centre and ignores the angle.
- Copy the CSS. One background line, under the preview. The SVG is there too.
When you would use this
A gradient is two colors and a direction, and the only part that reliably catches people out is the angle. CSS measures it clockwise from pointing up, so 0 degrees runs from the bottom to the top, 90 runs left to right and 180 runs top to bottom. That is not what most drawing tools do, and it is why a gradient copied from a design file so often comes out mirrored in the browser. The preview here is generated from the same angle as the CSS, converted to the two points SVG wants, so what you see is what the line will do. Radial ignores the angle, because a gradient spreading from the centre has no direction to set. Both colors take hex, rgb(), hsl(), oklch() or a CSS name, so you can paste whatever your design tool put on the clipboard. Copy the one line of CSS, or download the SVG.
Questions
- Which way does 90 degrees point?
- Left to right. CSS measures a gradient angle clockwise from pointing up, so 0 runs bottom to top, 90 runs left to right and 180 runs top to bottom. The preview follows the same rule as the CSS it gives you.
- Why does the angle do nothing on radial?
- Because a radial gradient spreads outward from the centre, so there is no direction for an angle to describe. The field stays visible rather than moving, so the layout does not jump when you switch.
- Can I add more than two stops?
- Not yet. Two covers most backgrounds and buttons, and the CSS it produces is a normal gradient you can add stops to by hand.