Tailwind Gradient Generator
Generate Tailwind gradient classes and CSS background values for linear, radial, and conic gradients. Live preview uses computed CSS. Copy the Tailwind class into a source file your build can scan.
Gradient type
Direction
Color stops
Preview
CSS Output
Tailwind Output
Palette match found.
All stops match colors in Tailwind's default palette. You can use the named class instead. Named classes are shorter and require no JIT scanning.
Frequently Asked Questions
What is the Tailwind gradient class structure?
Tailwind linear gradients are composed from three separate utility classes: a direction class (bg-gradient-to-r), a start-stop class (from-{color}), and an end-stop class (to-{color}). An optional middle stop uses via-{color}. For radial and conic gradients, no utility composition exists — you write the full gradient function inside bg-[...] arbitrary value brackets.
When should I use arbitrary-value classes vs. named palette classes?
Named classes (from-indigo-500) are shorter, more readable, and work with Tailwind's opacity modifier syntax (from-indigo-500/80). Use them when your hex matches a Tailwind default palette color exactly. Arbitrary values (from-[#6366f1]) work for any hex color, including brand colors not in the default palette.
Why doesn't the preview use the generated Tailwind class?
Tailwind compiles classes at build time by scanning your source files. The classes generated by this tool at runtime are not in pgh-web's compiled CSS. The preview uses computed inline CSS, which always works and is visually identical to what the Tailwind class produces in your project.
Why are underscores used in the arbitrary-value class?
Tailwind tokenises class names on whitespace. A literal space inside bg-[...] brackets terminates the class name early. Every space in the gradient value must be replaced with an underscore, which Tailwind's parser converts back to a space when generating CSS.
What Tailwind version is required for gradients?
bg-gradient-to-{direction}, from-, via-, and to- utilities have been in Tailwind since v2. Arbitrary value syntax (from-[#hex]) requires v3 or later. Conic gradient arbitrary values require v3.3+, which added improved arbitrary CSS support. Tailwind v4 supports all of these.