Free tool
CSS Gradient Generator
Build a linear or radial gradient with multiple color stops and copy the CSS instantly.
0%
100%
Linear vs. radial gradients
A linear gradient runs in a straight line at a chosen angle, while a radial gradient radiates outward from the center. Each color stop has a position between 0% and 100% that determines where that color starts to dominate. Add more stops for more complex transitions.