CSS Gradient Generator

Build beautiful CSS gradients visually. Linear & radial, multiple color stops, presets, and live preview.

Type

Angle: 135deg

Color Stops

HEX

Position

Opacity

100%

HEX

Position

100%

Opacity

100%

CSS Output

background: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(236, 72, 153, 1) 100%);
background: -webkit-linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(236, 72, 153, 1) 100%);

Presets

About CSS Gradients

CSS gradients let you display smooth transitions between two or more colors. Linear gradients transition along a straight line defined by an angle. Radial gradients radiate outward from a center point in a circular or elliptical shape. Use multiple color stops to create complex, layered effects.