CSS gradient generator
Make linear, radial and conic gradients with as many colour stops as you like, and copy the CSS.
Type
Mix in
Hue
Mixing in OKLCH keeps the middle bright. Browsers from 2023 on read it; older ones use the plain line.
Click the bar to add a stop, drag stops to move them. Arrow keys move the chosen stop.
background: linear-gradient(135deg, #ff7a59 0%, #ffd166 50%, #5b8cff 100%);
background: linear-gradient(in oklch 135deg, #ff7a59 0%, #ffd166 50%, #5b8cff 100%);- 1Add and move the colour stops.
- 2Pick the type and angle.
- 3Copy the CSS or save an image.
- Where are my colours and images worked on?
- In your browser, on your device. Colours you type and images you open stay with you.
- Does it work offline?
- Yes. Once this page has loaded, it keeps working without an internet connection.
- Which colour formats can I use?
- HEX, RGB, HSL, HWB, OKLCH, OKLab, CMYK, the 148 CSS colour names, or just three numbers like 30 144 255.
Related tasks
Ready-made settings for common jobs.
Other tools
More tools for working with colour.