How box-shadow actually works
Every CSS shadow is the same six-part declaration. Once you can read it, you no longer need a generator to guess — you use one to iterate faster.
box-shadow: inset offset-x offset-y blur spread color;
- offset-x / offset-y
- Where the shadow sits relative to the box. Positive Y pushes it down, which is what a light source above produces — the direction the eye reads as natural.
- blur
- How soft the edge is. At
0you get a hard-edged duplicate of the box, which is the whole basis of the neo-brutalist look. - spread
- Grows or shrinks the shadow before it is blurred. Negative spread is the trick behind a tight shadow that hugs the element instead of leaking out from under it.
- inset
- Draws the shadow inside the box instead of outside. This is how you make a field look pressed in rather than raised.
Why one shadow always looks cheap
A single large blur is the giveaway of a design that has not been looked at twice. Real objects do not cast one shadow — there is a tight, dark contact shadow where the object meets the surface, and a wide, faint one from ambient light.
Stack them with commas. The first shadow in the list paints on top:
box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.05);
Each layer roughly doubles the previous blur while the opacity drops. That ratio is the whole recipe, and it is why a stack of three weak shadows reads as more expensive than one strong one.
Neon glow
A glow is a shadow with no offset and a bright colour. Set both offsets to 0 so the light radiates evenly, then layer a tight one under a wide one:
box-shadow: 0 0 5px #0ff, 0 0 20px rgba(0,255,255,0.6);
Glassmorphism
The frosted-panel effect is not a shadow at all — the shadow is only the finishing touch. Three properties do the work: a semi-transparent background, a blur applied to whatever is behind the element, and a pale one-pixel border catching the light along the top edge.
background: rgba(255,255,255,0.15); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 8px 32px rgba(0,0,0,0.18);
Two things catch people out. The -webkit- prefix is still required for Safari. And the effect is invisible over a flat background — it needs something with contrast behind it, a photograph or a gradient, or you have simply built a grey box.