CSS Gradient Generator
Build a gradient and copy its CSS.
Your text stays on your deviceHow?
Colour stops
Stop 1 colour
%
linear-gradient(90deg, #ff0000 0%, #0000ff 100%) px
px
How to make a CSS gradient
- Choose linear, radial or conic, and set the angle or the centre.
- Drag the colour stops, or choose one and use the arrow keys or its position, and pick its colour.
- Copy the CSS, or download the gradient as a PNG at the size you need.
Questions
What does the colour space change?
It changes how the colours blend between stops. sRGB is the classic blend, which can look grey in the middle; OKLab and OKLCH blend the way eyes see, and OKLCH keeps colours bright by going round the colour wheel.
Do all browsers understand the CSS?
Linear, radial and conic gradients work in every current browser. The OKLab and OKLCH colour spaces need a browser from 2023 or later; older ones ignore the whole rule.
How do I add or remove a stop with the keyboard?
Press Add stop, move the chosen stop with the arrow keys (Shift for steps of 10), or type its position, and press Delete or Remove stop to take it away. A gradient keeps at least two stops.
Is anything I make sent anywhere?
No. The gradient and its PNG are made inside your browser.