Generate CSS box-shadow visually with a live preview. Customize offset, blur, spread, color, and inset.
CSS box shadows add depth and dimension to web elements, creating the visual hierarchy that guides users through your interface. From subtle card elevations to dramatic drop shadows, this property is one of the most versatile tools in a web designer's toolkit. The box-shadow property accepts multiple values: horizontal offset, vertical offset, blur radius, spread radius, and color. You can even layer multiple shadows for complex effects like realistic material design elevation or neon glows. Understanding how each parameter affects the visual result helps you create professional, consistent shadow systems. This generator provides real-time preview as you adjust parameters, then outputs clean CSS you can copy directly into your project. It supports inset shadows, multiple shadow layers, and RGBA colors for semi-transparent effects.
A popular card shadow is '0 2px 8px rgba(0,0,0,0.1)' for subtle elevation. For more pronounced depth, try '0 4px 16px rgba(0,0,0,0.12)'. Material Design uses layered shadows that increase with elevation level.
Adding the 'inset' keyword creates a shadow inside the element instead of outside. Inset shadows are useful for creating pressed/depressed button states, input field styling, or inner glow effects.
Large, heavily blurred shadows can impact rendering performance, especially on mobile devices or when applied to many elements. Keep blur radius reasonable and avoid animating box-shadow — animate opacity or transform instead.
Yes — separate multiple shadows with commas. Each shadow is rendered in order (first = top layer). This technique creates realistic depth: combine a tight, dark shadow with a wide, soft one for natural-looking elevation.
box-shadow applies to the element's box (rectangle). The filter: drop-shadow() function follows the element's actual shape, including transparency in PNGs. Use drop-shadow for non-rectangular elements like icons.