How to use the CSS Gradient Generator
- 1. Pick your coloursAdd up to five colours and set where each one sits.
- 2. Shape the gradientChoose the type and angle, and watch the live preview.
- 3. Get the CSS codePress the button and copy the code into your stylesheet.
The three types of CSS gradient
- Linear blends colours along a straight line. 90deg runs left to right, and 180deg runs top to bottom.
- Radial spreads out from the centre as a circle or ellipse.
- Conic sweeps around a centre point like a pie chart, which suits colour wheels and simple charts.
Here is what the code looks like:
background: #ff5421;
background-image: linear-gradient(90deg, #ff5421 0%, #13244f 100%);The first line is a plain colour for very old browsers, and the second line is the gradient. The percent after each colour sets where it sits. Two colours at 0% and 100% blend evenly across the whole box.
Tips for gradients that look good
Colours close to each other on the colour wheel usually blend more cleanly than opposites, which can turn grey in the middle. Two or three colours are often enough. If two stops share the same position, you get a sharp edge with no blend, which is useful for stripes.
Check any text placed on a gradient at both ends, because contrast changes across it. Paste each end colour into the HEX to RGB converter to see its contrast with white and black. Gradients are drawn by the browser, so they stay sharp at any size and need no image file.
The preview on this page updates freely as you play with the settings. The CSS code appears when you press Get CSS Code. All of this happens in your browser. Before publishing the page, set its preview tags with the meta tag generator.
Frequently asked questions
Do these gradients work in all browsers?
Linear and radial gradients work in all modern browsers. Conic gradients work in current browsers too, but very old versions may show the plain fallback colour.
How many colours can I use?
Between two and five. Use the position box to set where each colour sits.
Is the preview free to use?
Yes. Try as many settings as you like without entering anything. The code itself appears when you press Get CSS Code.
Is this tool free?
Yes, it is free. We ask for your name and WhatsApp number once when you see your result, and other Uncodemy tools then open without the form.