How to use this CSS gradient generator
Choose linear or radial as the gradient type, then adjust the angle for linear gradients or leave radial for a center-outward blend. Add as many color stops as you need, drag each stop's position slider to control where the color transition happens, and the preview along with the CSS code updates instantly. When it looks right, hit the copy icon and paste the code directly into your stylesheet.
Linear vs radial gradients
A linear gradient blends colors along a straight line at whatever angle you set — 90 degrees runs left to right, 180 degrees runs top to bottom. A radial gradient blends colors outward from a center point in a circular shape, which works well for spotlight effects, buttons and background accents.
Where to use CSS gradients
- Hero section backgrounds instead of a flat color or heavy image
- Button and card hover states for a subtle depth effect
- Text backgrounds with background-clip for a gradient heading effect
- Border accents and section dividers