CSS Gradient Generator

Create beautiful linear and radial gradients with live preview and copy-ready CSS.

Type: Angle: 90°

Color Stops

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 transparent as a stop color for fade effects.
Gradients work great as background-image overlays on hero sections and cards.