Loading Shrinkify...
Loading Shrinkify...
Generate beautiful CSS gradients with multiple stops. Copy code instantly and use in your web projects.
CSS gradients are more capable than most developers use them. The Gradient Generator gives you linear, radial, and conic gradient controls with multi-stop color configuration and live preview — exporting clean, production-ready CSS.
Ensure gradient overlays meet text contrast with Contrast Checker.
Linear gradients change color along a straight axis. Radial gradients radiate outward from a center point.
A gradient that rotates around a center point — useful for pie chart visualizations, loading spinners, and dial-style UI elements.
Add a transparent stop (rgba(0,0,0,0) or color with alpha 0) at the edge where you want the gradient to fade out.
Check out our technical guides to learn more about how browser-side processing works.
Read Glossary