CSS Gradient Generator
Create beautiful linear and radial gradients with live preview and copy-ready CSS.
Color Stops
0%
100%
CSS Code
background: linear-gradient(90deg, #58a6ff 0%, #3fb950 100%);
CSS Gradient Tips
- Linear gradients flow in a direction (0° = top, 90° = right, 180° = bottom).
- Radial gradients radiate from a center point outward.
- Add 3-5 color stops for the smoothest visual transitions.
- Use
transparentas a stop color for fade effects. - Gradients work great as
background-imageoverlays on hero sections and cards.