TOOLBeautiful CSS gradients, no guesswork
Gradients add depth to backgrounds, buttons and hero sections. Pick two colours, choose linear or radial, set the direction, and this tool shows a live preview and writes the exact CSS to paste into your stylesheet.
How CSS gradients work
Radial: background: radial-gradient(circle, #10b981, #2563eb);
For linear gradients, the angle sets the direction: 0° bottom-to-top, 90° left-to-right, 180° top-to-bottom. Radial gradients blend outward from the centre.
Pair it with
Pick harmonious colours first with the palette generator, and make sure any text on top stays readable with the contrast checker.
The generated CSS uses standard, widely-supported syntax. For older browsers you may want vendor-prefixed fallbacks.
Tips for gradients that look good
A few habits separate a polished gradient from a muddy one. Keep it to two or three colour stops — more than that tends to look busy. Blend colours that sit reasonably close on the colour wheel, since wildly different hues can pass through an ugly grey-brown in the middle. Match the direction to the layout: a subtle top-to-bottom fade for backgrounds, a diagonal for buttons and cards. When you're happy, copy the CSS straight out. To pick colours that work well together first, use the palette generator.
Frequently asked questions
How do I create a CSS gradient?
Use the background property with linear-gradient() or radial-gradient(). For example, background: linear-gradient(90deg, #10b981, #2563eb) fades from green to blue left to right. This tool writes that code for you.
What is the difference between linear and radial gradients?
A linear gradient blends colors along a straight line in a chosen direction. A radial gradient blends outward from a center point in a circle or ellipse, like a spotlight fading at the edges.
What does the angle mean in a linear gradient?
The angle sets the direction of the blend. 0deg goes bottom to top, 90deg goes left to right, and 180deg goes top to bottom. Any angle in between rotates the gradient line accordingly.