Why One Flat Shadow Looks Fake, and Layered Ones Don't

A card with box-shadow: 0 4px 12px rgba(0,0,0,0.25) sitting on a plain page usually looks like a sticker with a shadow printed behind it, not an object actually raised above the surface. The shadow is valid CSS and it still reads as fake, and the reason isn't the numbers - it's that one shadow layer can only describe one kind of light, and a real cast shadow is made of two.

A cast shadow is actually two shadows

Watch any object sitting a little above a surface in real light - a phone on a desk, a card propped against a wall. Right where it nearly touches the surface, the shadow is small, dark, and sharp-edged, because almost no light reaches that narrow gap and it stays dark all the way to its own boundary. A few centimetres further out, the shadow is faint, wide, and soft, because ambient light bounces around the room and fills most of it back in - only the object's own silhouette still blocks a little of it. One shadow is tight and dark. The other is loose and pale. Both happen at the same time, from the same object, and they don't look anything alike.

box-shadow describes exactly one of those at a time: one offset, one blur radius, one spread, one colour, one opacity, in a single instruction. A layer can be tight-and-dark, or it can be loose-and-pale. It cannot be both, because it is one rule, not two. That's the flat, pasted-on look - the shadow is physically incomplete, describing half of what a real cast shadow does.

Stacking layers fixes the exact gap it names

Box-shadow generator supports up to four shadow layers on one element, combined into a single comma-separated box-shadow value - the same property browsers already understand, just with more than one entry inside it. The default single layer (what Start fresh gives you) is box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25); - one soft, medium shadow, reasonable enough on its own, and still visibly flatter than a two-layer version sitting right next to it.

The tool's built-in "layered" preset is the two-shadow idea made concrete: a small, tight layer close to the element and a larger, soft one further out, combined into one real value:

box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1),
  0px 8px 16px 0px rgba(0, 0, 0, 0.15);

Neither layer alone looks like much on its own - the first is barely visible, the second is a wide, faint smear with no defined edge. Applied together to the same box, they read as one continuous shadow that gets denser the closer it sits to the element, which is exactly the physical behaviour a single flat layer can't reproduce, because it was never built to hold two different answers to "how far away is the light."

The other three presets show the range on purpose

The tool ships five fixed presets, not because there's one correct shadow, but because different UI moments genuinely call for different shadow shapes. Subtle (0px 1px 3px 0px rgba(0, 0, 0, 0.12)) is close to invisible by design - right for a nav bar or a table row that should feel barely lifted, not floating above the page. Soft (0px 4px 12px 0px rgba(0, 0, 0, 0.2)) is the general-purpose "this is a card" shadow, one step up from subtle. Hard (6px 6px 0px 0px rgba(0, 0, 0, 1)) has zero blur and full opacity - an offset silhouette rather than a soft shadow at all, the flat outline some neobrutalist or comic-panel style UI deliberately wants instead of realism. Layered is the two-shadow depth effect above. Inset flips the direction entirely.

Inset is answering a different question

Checking "Inset (inside the element)" on a layer doesn't make the shadow smaller or softer - it moves the exact same maths to the inside edge of the box instead of the outside. An outer shadow says "this thing sits above the page." An inset shadow says the opposite: "this is a hollow, pressed into the page" - the visual language of a pushed-in button, a search field, or a well something else sits inside. Reaching for inset when the design actually wants elevation, or the reverse, produces a shape that's valid CSS and reads wrong as a UI cue - worth knowing before it's the one setting quietly working against everything else on the page.

Shadows behave differently on a dark background

A shadow's visibility comes from being darker than the surface it's cast on, not from any absolute darkness of its own. A 25% black shadow reads clearly on a light page, because black at any real opacity is reliably darker than a light background. The identical value on a dark-themed page barely shows at all, because the page itself is already close to that same darkness - there's very little contrast left for the shadow to provide. A shadow tuned by eye on a light mockup and then reused unchanged on a dark theme is a common, easy-to-miss way a design loses its sense of elevation the moment dark mode is switched on. Getting a shadow that still reads on a dark surface usually means starting over with a different colour entirely - something noticeably darker than the page's own background, tuned against that background specifically, rather than assuming a value that worked on white will simply carry over.

None of this needs guessing at rgba values by hand. Box-shadow generator builds the layered value live, entirely in your browser, and gives you the exact CSS to copy.