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.

    Gradient Generator