CSS Box Shadow Generator
Create beautiful single or multi-layer box shadows visually. Adjust offsets, blur, spread, color, and opacity in real time. Pick from presets or build your own — then copy the CSS.
About CSS Box Shadow
The CSS box-shadow property adds one or more shadow effects to an element's frame. It accepts values for horizontal offset, vertical offset, blur radius, spread radius, and color. A positive horizontal offset pushes the shadow to the right, while a positive vertical offset pushes it downward. The blur radius softens the shadow's edge — larger values produce a more diffuse glow — and the spread radius expands or contracts the shadow's size. By combining these four parameters with an RGBA or HSLA color, you can simulate realistic lighting, add depth to card layouts, and create focus-drawing highlights around interactive elements.
One of the most powerful features of box-shadow is its ability to accept multiple comma-separated shadow definitions on a single element. Each shadow is rendered in the order it appears, with the first shadow on top. This layering technique allows you to create complex, photorealistic depth effects — for example, combining a tight, dark shadow close to the element for contact definition with a larger, softer shadow for ambient occlusion. Material Design's elevation system relies on exactly this approach, using two or three layered shadows to mimic how physical objects cast light at different distances.
The inset keyword flips the shadow to the inside of the element, which is essential for pressed-button effects and the increasingly popular neumorphism (soft UI) design trend. Neumorphic interfaces typically combine an outer highlight shadow (light color, negative offsets) with an outer dark shadow (positive offsets) on a background that matches the element color, creating a subtle extruded-plastic look. While visually striking, neumorphism should be used thoughtfully — ensure sufficient contrast for accessibility and test with users who may have difficulty distinguishing low-contrast raised and recessed surfaces.
From a performance perspective, box-shadow triggers a repaint but not a reflow, so it is relatively inexpensive compared to layout-changing properties. However, very large blur radii or many stacked shadows on numerous elements can impact rendering performance, especially on lower-powered devices. For animations, prefer transitioning opacity on a pseudo-element containing the shadow rather than animating the box-shadow property directly, as this allows the browser to promote the layer to the GPU for smoother compositing. Modern browsers support box-shadow universally, including IE 9+, making it one of the safest CSS properties to use across all target environments.