CSS gradient generator
Make a linear or radial gradient from two or three colours, preview it, and copy the CSS.
Runs in your browser. Nothing you enter is uploaded.
What it does
A gradient is a smooth blend from one colour to another. This tool builds the CSS for a linear gradient at any angle, or a radial one that spreads from the centre, and shows it as you change the colours.
How to use it
- Pick the start and end colours. Tick the box to add a middle colour.
- Choose linear or radial, and set the angle for a linear gradient.
- Copy the CSS line into your stylesheet, or download it.
Worked example
Saffron to maroon at 135°: background: linear-gradient(135deg, #e08a1e, #7a1f1f);
How it works
In CSS, linear-gradient(angle, colour, colour) draws the colours along a line. 0deg runs from bottom to top, 90deg from left to right, and 180deg from top to bottom. radial-gradient(circle, colour, colour) starts with the first colour at the centre. The browser works out every colour in between.
Questions
Why does my gradient show bands?
Two close colours over a large area have few steps between them. A slightly bigger difference, or a middle colour, hides it.
Can I put text on a gradient?
Yes, but check that the text is readable against both ends.
Does this work in all browsers?
The plain linear-gradient and radial-gradient syntax works in all current browsers without prefixes.
Related tools
Need an app or website for your shop? See how to hire us →