Gradient Generator
Build linear or radial gradients, tweak stops and angle, then copy the CSS or a Tailwind class.
45°
Preview
CSS
/* gradient background */ background-image: linear-gradient(45deg, #6366f1 0%, #22d3ee 100%);
Tailwind class
/* Tailwind */ bg-[linear-gradient(45deg,_#6366f1_0%,_#22d3ee_100%)]
background-image value
linear-gradient(45deg, #6366f1 0%, #22d3ee 100%)
Tip: You can add up to 6 color stops. Tailwind class uses an arbitrary value with underscores instead of spaces.