Loading the tool…
Visually compose multi-stop gradients
Blends the stops in oklch, which avoids the grey dead zone between complementary colors.
.gradient {
background: radial-gradient(circle, #334155 0%, #020617 100%);
/* Fallback for older browsers */
background-color: #334155;
}bg-[radial-gradient(circle, #334155 0%, #020617 100%)] for arbitrary gradients, or define it as a CSS variable in yourtailwind.config.js.Keep this gradient. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
Ten gradients, including the same three stops twice — once in sRGB and once in OKLCH — because the muddy midpoint that comparison exposes is the most useful thing this tool has to say.
Sunset, 135°
Rose through amber to emerald. The default, and a fair test of any interpolation.
Sunset, in OKLCH
The same three stops interpolated in OKLCH. Compare the midpoint against the sRGB version above.
Indigo fade, 160°
Two stops, one hue family. What a hero background should be and usually is not.
Conic spectrum
A conic sweep through five hues — the cheapest convincing "mesh" there is.
Radial spotlight
Light centre falling to near-black. Drop it behind a dark hero.
Dawn, 180°
Straight down, sky to horizon. Four stops, no hue crossing.
Sheen, 105°
A near-flat grey ramp. The gradient you use when you do not want one.
Citrus, 45°
Lime into amber, interpolated in OKLCH so the middle stays saturated.
Violet haze, 210°
Three violets a few steps apart — depth without a colour change.
Teal to rose, 120°
Near-complementary, which is where sRGB interpolation goes grey in the middle.
Every one of these is just the address bar. Change anything in the tool above and the URL changes with it — copy it, paste it into a ticket, or commit it in a review, and it opens for anyone with these exact settings. No account, and nothing to save first.