CSS Gradient Generator
Create CSS gradients by choosing a type, adding color stops, and adjusting the angle. The live preview updates as you make changes, and you can copy the finished CSS with one click.
Color Stops
Gradient Types
- Linear
- Colors blend along a straight line at the specified angle. 0° goes up, 90° goes right, 180° goes down.
- Radial
- Colors radiate outward from the center in a circle.
- Conic
- Colors sweep around a center point like a color wheel. The angle sets the starting position.
Tips
- Use two color stops for simple gradients. Add more stops for complex transitions.
- Set two stops to the same position to create a hard color boundary.
- For smooth gradients, space stops evenly.