Gradient Generator

Craft linear, radial and conic CSS gradients with full stop control, curated presets and a smart randomizer — then export CSS, Tailwind or SVG.

Preview

Press Space anywhere to shuffle a new gradient.

linear-gradient(135deg, #fbbf24 0%, #f97316 45%, #db2777 100%)

Gradient

Angle135°

Color stops

45%

100%

Export

CSS with a solid fallback, Tailwind arbitrary value, or a 1200×630 SVG.

.gradient {
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 45%, #db2777 100%);
}

/* Solid fallback for very old browsers */
.gradient {
  background-color: #fbbf24;
  background-image: linear-gradient(135deg, #fbbf24 0%, #f97316 45%, #db2777 100%);
}