Click Copy under any example and paste the box-shadow line into your CSS rule for the element you want to style. The preview shows each shadow on a box with a suitable background.

Yes. Separate each shadow with a comma, as in the layered, neumorphic and glow examples. Shadows are painted front to back, so the first one in the list appears on top.

Blur controls how soft the shadow edge is, while spread grows or shrinks the shadow before blurring. A negative spread keeps a large blur from spreading past the element, which is how directional shadows are made.

Use the same background color for the page and the element, then add one lighter and one darker shadow on opposite corners. The Neumorphism category above has raised and pressed versions you can copy.

A few shadows on static elements are fine. Large blurs on many animated elements can slow rendering, so keep blur values moderate and animate opacity or transform instead of the shadow itself where possible.