shadowLab
Website
Tech stack
React, Nextjs, Radix, Tailwind CSS, motion
What is shadowLab
shadowLab is a layered box-shadow editor: you stack offsets, blur, spread, and color on a live preview, then copy the same stack as plain CSS, Tailwind (inline or @theme), or React Native shadow styles.
Why it exists
Elevation is tuned by eye, and the same look has to survive three syntax handoffs. I wanted one bench where I could start from a preset, nudge, then paste without retyping.
Presets, including “border” stacks
Built-in presets are not only “card lift” looks. Some start from a hair-thin ring (zero blur, tiny spread) plus one or two soft layers so the edge reads like a border with depth instead of a flat stroke.
That pattern is handy when the background is noisy, photographic, or not a single flat fill, because the edge comes from translucent layers instead of one solid line color.
How I use it (and you should too)
Pick a preset close to the intent (including those border-like stacks), adjust until the panel feels grounded, then copy for web or native.
If hover states matter, you duplicate the stack, darken or tighten slightly, and keep both versions as separate exports or tokens.
