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.
2189 blocks and 1325 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.
Browse the blocksNo signup for the tools. MIT for free blocks, commercial licence for Pro.