CSS Gradient Generator
Build a linear, radial or conic gradient and get the CSS line, with the contrast between the two ends.
Results
What this tool does
The CSS for a gradient is short and easy to get slightly wrong: the angle turns the opposite way from the one you expect, the stops are percentages and the order matters. Set the colours and where they sit, and this page writes the line for you. It also tells you the contrast between the two ends, because a gradient is usually a background and text has to survive the whole width of it.
Formula
writes the CSS line with the colour stops in the order and at the percentages given
Variables
| Symbol | Meaning | Unit |
|---|---|---|
kind | Kind of gradient | — |
angle | Angle | ° |
color_1 | First colour | — |
stop_1 | Where the first one ends | % |
color_2 | Last colour | — |
stop_2 | Where the last one starts | % |
color_3 | A colour in the middle, if you want one | — |
stop_3 | Where the middle one sits | % |
OUT | The CSS | — |
VA | Just the value | — |
ST | Colour stops | — |
CO | Contrast between the two ends | :1 |
Worked example
- Kind of gradientlinear
- Angle135 °
- First colour#c9502f
- Where the first one ends0 %
- Last colour#17191f
- Where the last one starts100 %
- A colour in the middle, if you want one
- Where the middle one sits50 %
- The CSSbackground: linear-gradient(135deg, #c9502f 0%, #17191f 100%);
- Just the valuelinear-gradient(135deg, #c9502f 0%, #17191f 100%)
- Colour stops2
- Contrast between the two ends3.91 :1
Frequently asked questions
Which way does the angle point?
Zero degrees runs upwards, and the angle turns clockwise from there: 90 goes left to right, 180 goes top to bottom, 270 goes right to left. This catches people out because it is not how angles work in most other places, where zero points right and the turn goes the other way. The CSS committee chose it so that "180deg" reads as "downwards", which it does once you know.
What is the contrast line for?
Because a gradient is very often a background with text on top of it, and text that is readable at one end can disappear at the other. The figure is the contrast between the two end colours: when it is large, no single text colour will work across the whole width and you need either a narrower gradient or a panel behind the words.