Gradient Generator
Build a linear or radial gradient, control stops and direction, then copy CSS or download an image.
°
Colours
Drag a marker on the bar to move a colour, or press the bar to add a colour there.
%
%
%
%
Your result
Pick two colours to see the gradient.
How to use it
- Choose linear, radial, or conic, and set the angle.
- Pick the colours. Drag the markers on the bar to move them, or press the bar to add one.
- Copy the CSS or download a 1920 × 1080 PNG.
Examples
- Black to whiteLinear, 90°, #000000 to #FFFFFF linear-gradient(90deg, #000000 0%, #ffffff 100%)
- Three coloursConic from 45°, red, blue at 50%, green conic-gradient(from 45deg, #ff0000 0%, #0000ff 50%, #00ff00 100%)
Tool details and privacy
Build a linear, radial, or conic CSS gradient with up to four colours, see it live, and copy the CSS or download a PNG.
You see the gradient while you change it, so the CSS you copy is the one you saw.
Options
- Two to four colours, each at a position from 0% to 100%. The angle is 0 to 360 degrees.
Limits
- Conic PNG downloads need a recent browser.
- Colours are solid. Transparency is not set here.
Privacy
What you type stays in your browser. Nothing is uploaded or saved on the server.
Questions
What CSS does linear 90° from black to white give?
linear-gradient(90deg, #000000 0%, #ffffff 100%).
Can I download an image?
Yes, a 1920 × 1080 PNG of the same gradient.
How many colours can I use?
Up to four.
Is anything uploaded?
No.