Box Shadow Generator

The CSS box-shadow property adds shadow effects to elements. Its syntax is: box-shadow: offset-x offset-y blur-radius spread-radius color. The offset controls the shadow's position, blur controls softness, and spread expands or contracts the shadow size. Adding the inset keyword creates an inner shadow.

Layered shadows create depth and realism that single shadows can't achieve. Modern UI design uses multiple subtle shadow layers — for example, a tight dark shadow for definition combined with a larger, softer shadow for elevation. This approach mimics how real-world light creates both umbra (sharp) and penumbra (soft) shadows.

Performance tip: box-shadow triggers a repaint but not a reflow, making it safe for hover effects and transitions. However, very large blur values (100px+) on many elements can impact scroll performance. For elements that animate frequently, consider using filter: drop-shadow() instead, as it can be GPU-accelerated in some browsers.