CSS Gradient Generator
Pick two or three colours, choose a direction and copy ready-to-use CSS. The preview updates as you change anything.
About this tool
The first line is a solid fallback for very old browsers; every current browser uses the gradient line. Linear angles follow CSS: 0deg points up and 90deg points right.
Design a CSS gradient background with a live preview and copy the code. Choose linear, radial or conic, set the angle, pick two or three colours and their positions, and the CSS updates as you go. The code includes a solid fallback colour.
How to use the CSS Gradient Generator
- Choose the gradient type: linear, radial or conic.
- Set the angle for linear and conic gradients.
- Pick the colours and their positions from 0% to 100%. Tick “Use colour 3” for a third colour.
- Copy the CSS and paste it into your stylesheet.
A blue-to-teal header
With a linear gradient at 135 degrees from #2563eb at 0% to #14b8a6 at 100%, the CSS is background: linear-gradient(135deg, #2563eb 0%, #14b8a6 100%). At 135 degrees the gradient runs from the top-left corner to the bottom-right. Change the type to radial and it becomes radial-gradient(circle, #2563eb 0%, #14b8a6 100%), spreading out from the centre.
How CSS gradient angles work
In CSS, 0deg points straight up, 90deg points right, 180deg points down and 270deg points left, so a 90deg linear gradient starts on the left and ends on the right. Colour positions set where each colour is at full strength; between them the browser blends smoothly. A radial gradient spreads from the centre outwards, and a conic gradient sweeps around the centre like a clock hand, which is useful for pie-chart style backgrounds.
Common mistakes
- Expecting 0deg to run left to right. In CSS it runs bottom to top; use 90deg for left to right.
- Putting text on a gradient without checking contrast at both ends. Check the lightest and darkest colours with a contrast checker.
- Using gradients for very large photos or patterns, where an image may be clearer.
Frequently asked questions
Do all browsers support CSS gradients?
Yes, all current browsers support linear, radial and conic gradients. The first line of the copied CSS is a solid colour for very old browsers.
Can I use more than three colours?
Yes. Copy the CSS and add more colour stops separated by commas, for example #f59e0b 75%.
How do I make a hard line instead of a blend?
Give two colours the same position, for example #2563eb 50%, #14b8a6 50%.
Can I use the gradient on text?
Yes, with background-clip: text and a transparent text colour, but keep a plain colour fallback for readability.