Build linear or radial CSS gradients visually with multiple color stops — get the exact CSS code instantly.
Linear gradients transition colors along a straight line at a specified angle, while radial gradients transition colors outward from a center point in a circular or elliptical pattern.
Add as many color stops as you need using the "Add Color Stop" button, each with its own color and position.
Yes, the linear-gradient() and radial-gradient() CSS functions are supported by all modern browsers without vendor prefixes.
This tool lets you build CSS gradients visually — choosing linear or radial type, setting an angle, and adding multiple color stops — while seeing a live preview and generating the exact CSS code to copy into your stylesheet.
A linear gradient transitions between colors along a straight line at a specified angle — 0° points upward (bottom to top), 90° points rightward (left to right), and so on. A radial gradient instead transitions colors outward from a central point in expanding circles or ellipses, useful for spotlight effects, glowing buttons, or circular color transitions.
Each color stop defines a color and a position (as a percentage) along the gradient. With two stops, you get a simple two-color transition. Adding more stops lets you create more complex, multi-color gradients — for example, a sunset effect moving from orange to pink to purple, or a rainbow-style gradient with many distinct color bands.
All gradient building happens directly in your browser — nothing is sent to a server.