CSS linear gradient generator
Make a linear gradient 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.
- Good to know
- Gradients mixed in OKLCH avoid the grey middle you get between some colours.
- 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.
Related tasks
Ready-made settings for common jobs.
Other tools
More tools for working with colour.