Free CSS Gradient Generator
This free CSS gradient generator builds a linear or radial gradient from two or three colours and an angle, shows a preview and gives you the CSS to copy, including a solid colour fallback for old browsers. It suits designers and developers who want a background for a hero section, a button or a card without writing the syntax by hand.
CSS Gradient Generator
Generators and Converters
About this tool
A CSS gradient is a background image made by the browser, so it costs no download and stays sharp at any size. The syntax is short but easy to forget: linear-gradient takes an angle and a list of colours, and radial-gradient spreads colours outward from a centre point.
Choose the style, set the angle for a linear gradient, and pick two colours. Turn on the third colour for a three-stop blend; the stops are spread evenly. The page draws a preview from the same values and prints a background rule with a plain colour first, so browsers that cannot draw gradients still show something sensible. Angles follow the CSS rule: 0 degrees points up, 90 points right, 180 points down.
Watch contrast when text sits on a gradient: check the lightest and darkest parts against your text colour with the colour picker. Gradients with very different hues can look muddy in the middle, so try a third colour that sits between them. Nothing you choose is stored.
Frequently asked questions
What does the angle mean in a linear gradient?
It is the direction of the colour change. Zero degrees points to the top, 90 degrees to the right, 180 degrees to the bottom and 270 degrees to the left. A diagonal such as 135 degrees runs from the top left towards the bottom right.
Why does the CSS include a solid colour first?
It is a fallback. A browser that cannot draw gradients ignores the gradient line and uses the plain colour above it, so the background is never empty. All current browsers support gradients, so this only covers very old ones.
What is the difference between linear and radial?
A linear gradient changes colour along a straight line at the angle you choose. A radial gradient starts at the centre and changes colour outward in a circle or ellipse, which suits spotlights, buttons and soft glows.
Can I use more than three colours?
This tool makes two or three stops, which covers most designs. For more, copy the CSS and add extra colour stops by hand, separated by commas, optionally with a position such as #ff0000 40%.