Box Shadow
Generate CSS box-shadow with multiple shadows and live preview.
box-shadow: 4px 4px 16px 0px #00000040;About this tool
The Box Shadow Generator provides a visual interface for building the CSS 'box-shadow' property without guessing offset, blur, spread, and color values. You see the result in real time on a preview element as you adjust each parameter.
To use it, move the Offset X, Offset Y, Blur, and Spread sliders as needed, pick a shadow color, and check the inset option if you want an inner shadow effect. The multiple shadows feature lets you stack several layers in the same property — click "Add shadow", configure each one separately, and all layers will be combined in the generated CSS output.
In practice, developers use this tool to create elevation effects on cards (Material Design-style), highlight call-to-action buttons, add depth to modals and dialogs, create focus effects on form inputs, and build soft diffuse shadows on UI elements. It is especially useful for replicating shadows seen in Figma or Sketch designs.
Everything runs directly in your browser. No data is sent to external servers and no account is required.
Frequently asked questions
What is the 'inset' option?
The inset option flips the shadow to the inside of the element, creating a debossed or recessed appearance. It is useful for pressed button states or containers with a sunken look.
Can I combine multiple shadows on the same element?
Yes. Click 'Add shadow' to stack multiple layers. The generated CSS combines all shadows into a single 'box-shadow' property separated by commas.
Is this tool free?
Yes, completely free. No signup or payment required.
Is my data sent to any server?
No. All calculations and CSS generation happen locally in your browser. No data is transmitted.
Does it work on mobile?
Yes. The sliders and color picker are responsive and work well on mobile devices.