CSS Box Shadow Generator
Interactive CSS box-shadow with live preview and inset option.
How to use
Runs entirely in your browser. Live updates or click to run. No signup, no tracking, no data sent anywhere.
Part of 71 free tools by Auburn AI. Category: Generators
About this tool
The Box Shadow Generator lets you build CSS box-shadow declarations by adjusting sliders and colour pickers, then previewing the result live on a sample element. It outputs ready-to-paste CSS you can drop straight into your stylesheet. It is aimed at web developers and designers who want precise shadow values without guessing at numbers or constantly reloading a browser tab.
Reach for this tool when you are styling cards, buttons, or modals and need to dial in the exact look of a shadow. It is also handy when you are translating a design file into code and need to match a shadow visually rather than doing the math manually.
How to use it
- Open the tool and observe the default shadow applied to the preview element.
- Adjust the horizontal and vertical offset sliders to set the shadow direction.
- Set the blur radius and spread radius to control softness and size.
- Pick a shadow colour and set the opacity to match your design needs.
- Toggle the inset option if you need an inner shadow instead of an outer one.
- Copy the generated CSS declaration and paste it into your stylesheet.
Pro tips
- Stack multiple shadows by separating declarations with commas in your CSS — layer a tight dark shadow with a wide soft one for depth.
- Set spread radius to a negative value to shrink the shadow smaller than the element, creating a focused drop effect beneath.