Design CSS box shadows visually. Control offset, blur, spread and colour — add multiple layers and copy the CSS instantly.
Set horizontal and vertical offset, blur radius, spread radius and shadow colour. Toggle inset on or off.
Click Add Layer to stack multiple box shadows on the same element — each layer is independently configurable.
Click Copy CSS to copy the complete box-shadow property with all layers.
box-shadow adds one or more shadow effects around an element's frame. Each shadow is defined by X offset, Y offset, blur radius, spread radius and colour. Multiple shadows can be layered with commas.
Adding inset makes the shadow appear inside the element rather than outside it. Inset shadows create the appearance of pressed or recessed UI elements like sunken buttons or input fields.
Blur radius controls how soft and diffused the shadow edges are — a value of 0 gives a sharp shadow. Spread radius expands or contracts the shadow in all directions before blur is applied.
Yes. Separate multiple box-shadow values with commas. The first shadow in the list is rendered on top. This lets you create layered, multi-coloured or multi-directional shadow effects.
Use a small positive Y offset (e.g. 4px), a moderate blur (e.g. 12px), zero spread and a semi-transparent black colour like rgba(0,0,0,0.15). This mimics natural light falling from above.
Use 0 for both X and Y offset, a large blur radius and 0 for spread. Set the colour to a vivid, fully opaque or semi-transparent hue. For example: box-shadow: 0 0 20px rgba(10,106,255,0.6).
No. Like outline, box-shadow does not affect the document flow or the element's box model dimensions. It does not push other elements away.
Yes. box-shadow is animatable. Use transition: box-shadow 0.3s ease to smoothly transition between shadow states on hover, focus or any state change.
box-shadow triggers paint operations during animation, which can affect performance on older devices. For smooth animations, prefer filter: drop-shadow() or transform-based alternatives where performance is critical.
box-shadow applies to the element's box (its rectangular border-box). filter: drop-shadow() applies to the alpha shape of the element — useful for non-rectangular elements like PNGs with transparency.
