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.
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.