Which gradient types can I create?

The tool supports linear, radial and conic CSS gradients with copy-ready CSS output.

Can I use the generated gradient in Tailwind CSS?

Yes. The page also provides a Tailwind arbitrary background value you can copy.

CSS Gradient Generator

Create linear, radial and conic CSS gradients with live preview, copy-ready CSS and practical presets for hero sections, buttons, dashboards and landing pages.

Live gradient previewUse it for CSS backgrounds, hero sections and UI accents.

CSS

.gradient-background {
  background: linear-gradient(135deg, #2563EB, #22D3EE);
}

Tailwind arbitrary value

bg-[linear-gradient(135deg,_%232563EB,_%2322D3EE)]

Check text contrast Extract colors from image Pick screen color Gradient guide