The box-shadow property adds shadow effects around an element's frame. It takes values for horizontal offset, vertical offset, blur radius, spread radius, and color. You can add multiple shadows comma-separated and use the inset keyword for inner shadows.
There is no hard limit. You can stack as many box-shadow layers as you need. Layered shadows create more realistic depth effects. However, many complex shadows can impact rendering performance on mobile devices.
Blur controls how fuzzy the shadow edge is — higher values create softer shadows. Spread controls the size of the shadow — positive values make it larger than the element, negative values make it smaller. Together they create different shadow effects from tight and sharp to large and diffused.
Set both x and y offsets to 0, use a moderate blur (15-30px), no spread (or slight positive spread), and a bright color with moderate opacity. Colored shadows create glows: box-shadow: 0 0 20px rgba(124, 58, 237, 0.3) for a violet glow.
Layer 2-3 shadows for realistic depth: a tight shadow for definition and a larger diffused shadow for ambient light. Use negative spread for tighter edges.