Gradient Generator

Create CSS linear and radial gradients visually and copy ready-to-use CSS.

Gradient Settings

Customize gradient

Choose your gradient type, colors and direction.

Gradient Type

linear

Angle

Rotate the gradient direction.

0°90°180°270°360°

Color Stops

3/6 colors

Color 1

0%50%100%

Color 2

50%

0%50%100%

Color 3

100%

0%50%100%

Presets

Live Preview

Preview updates instantly as you change the settings.

CSS Gradient

135° Linear

3 color stops

CSS Code

background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);

Gradient Colors

#2563eb0%

#7c3aed50%

#ec4899100%

Select two or more colors and adjust their positions in the gradient.

Choose linear or radial style and adjust the direction or angle.

Preview your gradient and copy the generated CSS directly into your project.