Box Shadow Generator

The box-shadow property paints a copy of the element's border box behind or inside it, offset, resized and blurred. The four lengths do different jobs. Horizontal and vertical offsets translate the shadow, with positive values moving it right and down. Spread inflates or deflates the shadow shape before blurring, so a negative spread stops a large blur from spilling past the element's edges. Blur radius is not the blur's extent but twice its standard deviation: the specification describes a Gaussian with sigma equal to half the stated radius, and the visible transition spans roughly the blur radius centred on the shadow edge. The inset keyword flips the geometry so the shadow draws inside the padding box, reversing the apparent lighting. Shadows follow the element's border-radius, and comma-separated shadows stack with the first listed drawn on top. Convincing depth usually comes from layering rather than one large shadow: a tight, higher-opacity contact shadow of 1 to 2 px paired with a wide, low-opacity ambient shadow reproduces how real occlusion behaves. Opacity between 8 and 25 percent of a dark hue reads better than solid black, and tinting the shadow toward the background hue avoids the muddy grey that pure black produces over saturated colours. The caveats: box-shadow always follows the box rather than the alpha channel of its contents, so transparent images need the drop-shadow filter instead; large blurs across many elements are paint-expensive; and shadows carry no contrast guarantee, so they cannot be the sole indicator of a control's boundary.

Before CSS could draw them, drop shadows were images. Designers exported shadowed edges as sliced PNGs, a workflow that pinned the shadow to one background colour and one element size, and escaping that constraint was a recurring theme in the CSS3 proposals of the mid 2000s. WebKit implemented -webkit-box-shadow in the Safari 3 era and Mozilla followed with -moz-box-shadow, with the unprefixed property becoming broadly usable across engines around 2010 and 2011 as part of the CSS Backgrounds and Borders Level 3 module. That module also fixed the definition of sigma as half the blur radius, which is what keeps rendering consistent between browsers. Usage then swung with design fashion. Late-2000s skeuomorphic interfaces leaned on heavy bevels and shadows; the flat design turn around 2013, most visibly in iOS 7, stripped nearly all of them out. Google's Material Design, introduced in 2014, restored shadows as a systematic signal by defining elevation in density-independent pixels and specifying a shadow recipe for each level, which is why so many component libraries now ship an elevation scale instead of ad hoc values. A brief neumorphism trend around 2019 and 2020, built from paired light and dark shadows against a matching background, drew immediate accessibility criticism because the element boundaries it produces fall well below common contrast thresholds.