Pick colours, set the angle and copy ready-to-use CSS gradient code.
🔒 Runs in your browser.
How to use the css gradient generator
- Pick your colours or a preset.
- Choose the type and angle.
- Copy the CSS.
Using the code
Paste both lines into your CSS rule. The first line is a solid fallback colour for very old browsers; the second is the gradient.
Frequently asked questions
Do gradients slow a page down?
No – CSS gradients are drawn by the browser and are far lighter than an image.
Can I add more colours?
Add more colours to the list in the code, separated by commas.
Is the text still readable?
Check your text colour against the darkest and lightest part with the Color Contrast Checker.