CSS toolsGradient generator
CSS Gradient Generator
Pick a type, set the angle and drag the colour stops: this CSS gradient generator writes the background rule while you work. It handles linear, radial and conic gradients with two to five stops, and the CSS it gives you includes a solid colour fallback.
How to use the CSS gradient generator
Choose linear, radial or conic. The controls that do not apply to that type are hidden.
Set the direction: the angle for linear and conic gradients, the shape and centre for radial ones.
Change each stop's colour and slide it to its position. Add up to five stops, or remove one with the × button.
Copy the CSS and paste it into the rule for your element. Both lines belong together.
Linear, radial and conic CSS gradients
A gradient in CSS is an image the browser draws, so it goes wherever an image can go: background, background-image, border-image and mask-image. It has no size of its own and stretches to the box it paints.
Linear gradients run along a straight line. The angle sets the direction: 0deg points up, 90deg to the right and 180deg down, so 135deg runs from the top left corner towards the bottom right. Keywords such as to right do the same job.
Radial gradients spread out from a centre point as a circle or an ellipse. An ellipse follows the proportions of the box, a circle stays round whatever the box looks like.
Conic gradients sweep around a centre like the hands of a clock. They make pie charts, colour wheels and the shiny metal look, and the start angle turns the whole sweep.
Colour stops and hard edges
Each stop is a colour and a position from 0% to 100%. Between two stops the browser blends the colours; before the first stop and after the last one the colour stays flat. The generator sorts the stops by position before it writes the CSS, so the order you add them in does not matter.
Put two stops at the same position and the blend disappears: the colour changes in a hard line. That is the trick behind striped backgrounds, flags and progress bars drawn with CSS only. For a fade to see-through, end on a transparent colour such as rgba(255, 255, 255, 0) instead of the keyword transparent when the colours around it are light.
Browser support for CSS gradients
Linear and radial gradients work in every browser in use today without a prefix, so the -webkit- lines that older generators still print are no longer needed. Conic gradients arrived later and work in current Chrome, Edge, Firefox and Safari. The first line of the output, a plain background colour, is what a browser shows if it cannot draw the gradient; it uses the colour of your first stop.
Questions
- How do I make a gradient fill the whole page?
- Put the background on the body and give it room: body { min-height: 100vh; } plus the gradient. Without a height the body is only as tall as its content and the gradient repeats below it. Add background-attachment: fixed if the gradient should stay put while the page scrolls.
- Can I put a gradient on text?
- Yes. Give the text the gradient as its background, then clip the background to the letters: background-clip: text; color: transparent. Older Safari versions still want the prefixed -webkit-background-clip: text next to it.
- Why does my gradient show stripes or banding?
- A long gradient between two close colours has fewer shades than pixels, so the steps become visible. Add a middle colour stop, shorten the distance, or pick colours that are further apart.
- What is the difference between linear-gradient and repeating-linear-gradient?
- linear-gradient runs once across the box. repeating-linear-gradient repeats the stop pattern until the box is filled, which is how CSS stripes are made: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px).