Loading the tool…
Layer up to 8 box-shadows or text-shadows
Each one replaces the stack — a shadow is a relationship between its layers, and half of the last one left underneath is a different effect. The two neumorphic entries are computed from the card colour and switch the stage to Match, because that style only exists when the element and the page are the same colour.
X / Y move the shadow — a light source above the element means Y positive, X near zero. Blur softens the edge, and wants to be larger than Y or the shadow reads as an outline. Spread grows or shrinks the shape before blurring; negative values pull it in so only a sliver shows.
X / Y move the shadow — a light source above the element means Y positive, X near zero. Blur softens the edge, and wants to be larger than Y or the shadow reads as an outline. Spread grows or shrinks the shape before blurring; negative values pull it in so only a sliver shows.
X / Y move the shadow — a light source above the element means Y positive, X near zero. Blur softens the edge, and wants to be larger than Y or the shadow reads as an outline. Spread grows or shrinks the shape before blurring; negative values pull it in so only a sliver shows.
.card {
box-shadow:
0px 1px 2px rgba(0, 0, 0, 0.05),
0px 1px 4px -1px rgba(0, 0, 0, 0.10),
0px 8px 24px -4px rgba(0, 0, 0, 0.15);
}shadow-[0px_1px_2px_rgb(0_0_0_/_0.05),_0px_1px_4px_-1px_rgb(0_0_0_/_0.1),_0px_8px_24px_-4px_rgb(0_0_0_/_0.15)]Keep this shadow. 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
Nine stacks, each a shape rather than a setting — the hairline that stands in for a border, the elevation that reads as height, the two-offset neumorphic pair that only makes sense on a matched surface.
Three-layer elevation
The default stack. Tight contact shadow, mid falloff, wide ambient — how a real elevation is built.
Hairline
One 1px layer at 8%. A border that is not a border, and the most-used shadow in any dense UI.
Lifted card
A big soft ambient with a negative spread, so it reads as height rather than as a halo.
Inset well
Two inset layers — the recessed input field, and the only shape `inset` is genuinely for.
Neumorphic
One light and one dark offset on a matched surface. Preview it anywhere else and it is meaningless.
Focus glow
A zero-offset coloured spread. What a focus ring looks like when it is a shadow instead of an outline.
Dark-mode elevation
Shadows barely read on dark surfaces. This is the stack that still does — deeper, wider, nearly opaque.
Text, hard offset
A zero-blur text-shadow — the poster look, where the offset is the whole effect.
Text on an image
One soft dark shadow under light text. The minimum that keeps a hero headline readable over a photo.
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.