Box shadow builder

What are the box-shadow values for a soft elevation?

One shadow written from four numbers, and the two-layer version underneath it - a tight contact shadow plus a wide ambient one, which is what an elevation actually looks like.

x offset y offset blur spread colour opacity, percent

8px down, 24px blur A shadow reads as height. Offset says how far up, blur says how soft the light is.

ready to paste

box-shadow: 0px 8px 24px -4px #0f172a2e;

layered, for real elevation 0 2px 6px #0f172a25, 0px 8px 24px -4px #0f172a2e
inset instead inset 0px 8px 24px -4px #0f172a2e
as a drop-shadow filter drop-shadow(0px 8px 12px #0f172a2e)

how to use it

Set the offsets, the blur and the spread in pixels.
Set the colour and how opaque it is.
Copy the single shadow, or the layered pair below it for real elevation.

what this page cannot do

The extension reads the shadows a page already declares, so you can see the six near-identical elevations a design system accumulated rather than inventing a seventh.

Site styles in the panel Can I keep a CSS fix for one site and have it come back?

Add LoupeKit

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more the Chrome build

no host permissions · the reading is free