tool · one of 51 free, no counter
Shadows
What box-shadow makes this card look lifted rather than smudged?
A single box-shadow looks like a smudge; real depth is several layers with different offsets and blurs. This builds up to six of them, previews them over three grounds - because a shadow that works on white can vanish on a dark surface - and then puts the exact declaration on an element of the page you are looking at, so the judgement is made in the design it is for and not on a grey square.
Reach it Press ⌘ + K on any tab and type shadows. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
layered box-shadows and an elevation ladder, tried on the real pageWhen a card, a menu or a modal needs to sit above the page and the design file only says "shadow: medium". The elevation ladder builds a whole set of levels from one colour, which is where a design system's shadows usually start.
Asked about this tool
3 of themDoes applying it change the site?
No. It is a live edit to the page in this tab, with its own undo row. The row's cross, Clear LoupeKit changes and a reload all take it off, and nothing is written anywhere.
Why several layers rather than one shadow?
Light does not cast one blur. A tight, dark layer close to the element and a wide, faint one further out is what reads as height; one shadow either looks flat or looks dirty.
What is the elevation ladder?
A set of levels built from one shadow colour, each lifting the element further. Load one into the editor to tune it, or use them as the first draft of a design system's shadow scale.
how to use shadows
- Open Shadows and start from a preset, or tune each layer's offset and blur.
- Switch the preview ground between light, dark and brand to see where it fades.
- Select an element on the page and apply the shadow to judge it in place.
- Copy it as CSS or as a Tailwind arbitrary value.
96 of these · no host permissions · three free audits