The five values, in order
box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.12);
/* │ │ │ │ └ colour, usually with alpha
│ │ │ └ spread: grow (+) or shrink (−) before blurring
│ │ └ blur: how soft the edge is
│ └ Y offset: positive moves it down
└ X offset: positive moves it right */
Add inset at the front to draw it inside instead of outside.
Why one shadow never looks right
Look at any physical object on a desk. There is a dark, tight shadow where it
touches the surface, and a much wider, fainter one spreading away from it. A
single box-shadow can produce one or the other.
Two layers is usually enough:
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 8px 24px -4px rgba(15, 23, 42, 0.12);
The first layer sits the element on the surface. The second gives it height.
Colour matters more than opacity
A pure black shadow at low opacity turns everything under it grey and slightly dirty. Tinting the shadow toward the background hue — a blue-grey on a cool page, a warm brown on a cream one — is the difference between a shadow that looks designed and one that looks defaulted.
Layer order
Layers paint front to back: the first in the list sits on top. This matters when they overlap at different colours.
Everything happens in the browser
The preview is a real element with your real declaration applied to it, so what you see is exactly what the CSS produces. Nothing is sent anywhere.
Questions
What is the difference between blur and spread?+
Blur softens the edge of the shadow without changing its size. Spread grows or shrinks the shadow itself before the blur is applied. A small negative spread with a large blur is the trick behind most shadows that look expensive — it keeps the shadow tucked under the element instead of haloing around it.
Why use several layers?+
Real light produces a tight contact shadow right under an object and a wide soft one further out. One shadow can be tight or soft, not both. Two or three layers at different blurs is what separates a modern elevation from a 2010 drop shadow.
What does inset do?+
It draws the shadow inside the element instead of outside, which is how you get a pressed button, an inset field, or a subtle inner edge. Inset and outer shadows can be mixed in the same declaration.
Do box shadows hurt performance?+
A static shadow is cheap. Animating `box-shadow` is not — it forces a repaint every frame. If you need a shadow to change on hover, animate the `opacity` of a pseudo-element that carries the larger shadow instead.