Build a linear, radial or conic gradient by dragging its stops, then copy it as plain CSS, as a Tailwind arbitrary value, or as a theme variable.
.hero {
background-image: linear-gradient(135deg, #ffb703 0%, #fb8500 46%, #9d0208 100%);
}
<div class="bg-[linear-gradient(135deg,_#ffb703_0%,_#fb8500_46%,_#9d0208_100%)]" />
@theme {
--background-image-hero: linear-gradient(135deg, #ffb703 0%, #fb8500 46%, #9d0208 100%);
}
/* then: <div class="bg-hero" /> */
Tailwind arbitrary values cannot contain spaces, so every space in the gradient becomes an underscore. Tailwind turns them back into spaces when it writes the CSS, so bg-[linear-gradient(135deg,_#fb7185_0%,_#8b5cf6_100%)] is the gradient you built.
When the gradient is used more than once. A --background-image-* entry in @theme gives you a named utility, so the gradient lives in one place and every use of it changes together.
Yes. Drag one stop past the next so the two sit at the same position, or place them a percent apart. Stops are written in the order you set them and are never sorted, which is what makes stripes possible.
Because 8 bits per channel cannot hold every step of a slow, wide ramp, so it steps instead. The usual fix is a faint noise overlay, a couple of percent at most, which breaks the bands up. Wider gradients and low-contrast pairs band the worst.