Gradient Generator
Create and preview CSS gradients visually.
Gradient Settings
Set gradient type and direction
Color Stops
Set gradient colors and positions
%
%
Presets
Try predefined gradients
Preview
View the generated gradient
Generated CSS
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);Gradient Type Description
Linear Gradient
A gradient that changes color in a straight line direction. You can adjust the angle to set the direction.
Radial Gradient
A gradient that changes color from a center point outward in a circular or elliptical shape.
Conic Gradient
A conical gradient that changes color while rotating around a center point.