CSS Color Gradient Generator

Generate beautiful CSS linear and radial gradients with a live preview. Copy CSS or Tailwind classes instantly. Add color stops, adjust angle, and use presets.

Presets

Color Stops

#6366f1
0%
#ec4899
100%

CSS

background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

Tailwind

bg-gradient-to-r from-[#6366f1] to-[#ec4899]

Approximate Tailwind class — custom colors use arbitrary value syntax.

Frequently Asked Questions

CSS Gradient Generator Online – Linear & Radial Color Gradients | CoreTools