Box shadow inspector

Modern shadows stack several layers into one long value. Screen Ruler splits them apart, shows what each layer does on its own and gives you clean CSS to copy.

What it shows

A soft, realistic shadow is rarely one shadow. Design systems often combine three or more layers, a tight dark one for the edge and wider, fainter ones for depth, all packed into a single comma-separated box-shadow value that is hard to read. When the selected element has a shadow, the side panel adds a Box Shadows section, titled with the number of layers, for example 3 Box Shadows. It contains:

• A live preview. A card rendered with the element's exact shadow, so you see the combined effect away from the page's own background and content.
• An exploded view. Hover the preview and the layers fan out diagonally, so you can see each one as a separate card.
• Single-layer isolation. Hover one of the fanned-out layers and the other layers' shadows switch off, leaving only that one. Its value appears as a tooltip.
• Readable CSS. The full box-shadow declaration with each layer on its own line, ready to copy.

How to inspect a box shadow

1. Open the page with the element you want.
2. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
3. Click the element that carries the shadow, usually a card, button, menu or modal. If nothing shows up, the shadow may sit on a parent or child: press Alt + Shift + Up to select the parent, or Alt + Shift + Down for the first child.
4. In the side panel's Element tab, find the Box Shadows section.
5. Hover the preview to explode the layers, hover a layer to isolate it, and click the copy button to copy the CSS.

How it works

Screen Ruler reads the element's computed box-shadow and splits it into layers at the top-level commas, leaving the commas inside color functions like rgba() alone. Each layer keeps its own offset, blur, spread, color and inset keyword, and the preview draws each one with the real CSS, so what you see is what the browser would render.

Colors in the code block follow the format you picked in the Colors section (HEX, RGB, HSL or HSB). Colors written in newer spaces such as oklch() are converted, so every layer reads the same way.

Because the value is computed, you get the shadow that is actually applied, after any custom properties and theme variables have been resolved. That makes it handy on sites that build shadows from tokens like var(--shadow-lg), where reading the stylesheet would only show the variable name.

Limits

• Box shadows only. text-shadow and filter: drop-shadow() are not broken down here. A filter value still shows in the Computed CSS view.
• The selected element only. Shadows on ::before or ::after pseudo-elements, a common trick for animated shadows, are not split into layers. They do appear in the pseudo-element blocks of the Computed view.
• The current state. A shadow that only appears on hover shows up once that state is active. Use Force Element State to pin :hover while you inspect it.

When it is useful

• Copying an elevation style. Lift the exact layered shadow from a site you admire and adapt it.
• Understanding depth. See how much each layer contributes, and which one to tweak when a shadow looks muddy or too sharp.
• Checking a design system. Confirm that cards, menus and dialogs use the shadow tokens the design specifies.

Shadows often travel with gradients and animation, so the gradient inspector and animation inspector sit in the same side panel.

Visualize Box Shadows is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

How do I copy a box shadow from a website?

Start Screen Ruler, click the element with the shadow and open the Box Shadows section in the side panel. The copy button copies the full box-shadow declaration, with every layer included.

Can I see what each shadow layer does on its own?

Yes. Hover the preview to fan the layers out, then hover a single layer. The other layers' shadows switch off so you see that layer in isolation, with its value in a tooltip.

Why does the shadow look different from what is in the stylesheet?

Screen Ruler shows the computed value. Custom properties are replaced with their values, and colors are shown in your chosen format, so the numbers match what the browser draws even when the stylesheet only references a variable.

Does it work with inset shadows?

Yes. Inset layers keep their inset keyword in the CSS and are previewed as inner shadows.