CSS Box Shadow Generator

box-shadow: [inset] x y blur spread color. X offset: positive moves right. Y offset: positive moves down. Blur: higher = softer edge (0 = sharp). Spread: positive expands the shadow in all directions, negative contracts it. inset: renders inside the element instead of outside.

Use two inset or two outset shadows: one light (white/light color) and one dark (dark/grey). For neumorphic: a light shadow going top-left and a dark shadow going bottom-right, both with high blur and low spread. The element background must match the page background for neumorphism to work.

Yes, box-shadow is animatable. However, it triggers paint and composite operations which can hurt performance. A more performant technique is to animate opacity of a pseudo-element (::after) that has the target shadow, using transition: opacity instead of transition: box-shadow.