CSS Gradient Generator

Free

Create CSS gradients visually. Adjust type, angle, color stops and copy the CSS code.

Presets

Type

Direction

135°

0° (top)90° (right)180° (bottom)270° (left)

Color Stops

0%0%100%

0%100%100%

Preview

CSS Code

Value only

linear-gradient(135deg, #667eea 0%, #764ba2 100%)

Full declaration

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

background-image

background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Tailwind arbitrary

bg-[linear-gradient(135deg,_#667eea_0%,_#764ba2_100%)]

Reviews