CSS Gradient Generator
Design linear, radial, or conic CSS gradients visually and copy the code instantly.
90°
#6366f1
#ec4899
background: linear-gradient(90deg, #6366f1, #ec4899);About CSS Gradient Generator
This tool lets you build CSS gradients — linear, radial, or conic — by picking colors and, for linear and conic gradients, an angle, with a live preview updating as you go. Add up to five color stops to create smooth multi-color gradients for backgrounds, buttons, or hero sections. Conic gradients sweep colors around a center point (like a color wheel or pie chart) rather than along a line or outward from a center, which makes them useful for loading spinners, pie-chart visuals, and color-wheel pickers. Once you're happy with the result, copy the ready-to-use CSS declaration directly into your stylesheet.
Pairing this with a shadow? See the box-shadow guideFrequently Asked Questions
A linear gradient transitions colors along a straight line at a specified angle. A radial gradient transitions colors outward from a center point in a circular or elliptical pattern. A conic gradient sweeps colors around a center point like a clock hand, useful for pie charts and color wheels.
You can add between 2 and 5 color stops to build simple two-tone gradients or more complex multi-color blends.
The generated CSS targets the background property by default, but you can adapt it for text gradients using background-clip: text and color: transparent, or for border-image gradients.