CSS Gradient Generator
To create a CSS gradient, choose linear, radial or conic, add colour stops, drag their positions and set the angle. Copy the background CSS, which works in every modern browser without prefixes.
- Free
- No signup
- Runs in your browser
Loading tool…
How to use CSS Gradient Generator
- 1Type or paste your input into the CSS Gradient Generator.
- 2Choose any options you need.
- 3See the result update instantly.
- 4Copy the result or download it.
CSS Gradient Generator: questions people ask
Do I need -webkit- prefixes?
No. Unprefixed gradients work in all browsers released since 2013.
How do I make a hard colour edge?
Put two stops at the same position, e.g. red 50%, blue 50%.
Is my data uploaded when I use the CSS Gradient Generator?
No. The CSS Gradient Generator runs entirely in your web browser, so your text and numbers stay on your device and work even on a slow connection.
Does the CSS Gradient Generator work on iPhone, Android and Mac?
Yes. The CSS Gradient Generator runs in any modern browser (Safari, Chrome, Edge or Firefox) on iPhone, iPad, Android phones, Mac, Windows and Chromebook. There is no app to install.
Is the CSS Gradient Generator free?
Yes. The CSS Gradient Generator is free with no signup, no watermark and no daily limit.