Box-Shadow Studio

Design CSS box-shadows and glassmorphism effects with a live preview and copy-ready CSS.

The four numbers are x offset, y offset, blur and spread, and spread is the one that gets misunderstood — it grows or shrinks the shadow before blurring, so a negative spread with a large blur gives the tight, soft shadow that reads as a card lifted slightly off the page. The `inset` keyword flips the whole thing inward.

Depth is more convincing from several small shadows than one big one, because real light produces both a tight contact shadow and a broad ambient one. Glassmorphism combines that with a translucent background and a backdrop blur — worth remembering that blurring the backdrop is expensive to composite, so it is a poor choice for an element that animates.