Builds a CSS box-shadow property from offset, blur, spread, colour, and opacity, with a live preview. Fast, free, and built for simple browser-based workflows.
728 x 90 In-Content Ad
Box Shadow Generator is a free online tool that builds a CSS box-shadow property with sliders and a live preview, so you can see exactly where a shadow falls and how soft it is before writing any code. Adjust the controls, copy the generated CSS, and paste it straight into your stylesheet.
It is useful when you are designing a card, button, or modal and want to see how offset and blur actually look before writing the property by hand, or when you need an inset shadow for a pressed-in input field instead of the usual drop shadow. Testing spread separately from blur also makes it easy to get a tight, defined edge instead of a soft halo. The starting values -- 12px down, 30px of blur, and 25% opacity -- give you a soft card shadow to adjust from rather than a blank slate.
Everything runs inside your browser, so the values you are experimenting with are never sent to a server. That is enough to try dozens of combinations privately before settling on the one that goes into a client project or a design you have not shipped yet. Two things are worth knowing when you paste the result. A shadow follows the element's rounded corners -- the preview box has 12px corners, and the Border Radius Generator tool sets your own. It also takes up no space in the layout, so it never pushes neighbouring elements aside, but a parent with overflow: hidden will clip it. For a hover effect, build a second, stronger shadow here and swap it in on :hover with a short transition.
Drag Horizontal Offset and Vertical Offset to position the shadow.
Blur softens the edge; Spread grows or shrinks the shadow's size independently of blur.
Set Shadow Colour and Opacity, tick Inset for a pressed-in look, and set Box Colour and Page Colour to preview against your real design.
Click Copy CSS once the preview looks right. Reset restores every control to its default.
Yes! All our tools are 100% free to use with no hidden costs, no registration required, and no credit card needed.
Absolutely. All tools run entirely in your browser (client-side). Your data never leaves your device and is not sent to our servers.
Yes, once the page is loaded, the tool will continue to work even if you lose internet connection since it runs in your browser.
There is no strict character limit, but very large amounts of text (100,000+ characters) may slow down your browser.
Yes! All our tools are free for both personal and commercial use.
Blur softens and fades the shadow's edge outward; spread grows or shrinks the shadow's overall size while keeping its edge sharp. Combining both is what gives a shadow a specific, deliberate look instead of a generic blur.
It converts the hex colour you pick into its red, green, and blue components and wraps them in an rgba() value with the opacity slider as the alpha channel, since box-shadow's colour argument does not accept a separate opacity property.
It adds the inset keyword to the generated CSS, which draws the shadow inside the element's border instead of outside it -- useful for pressed buttons, sunken input fields, or a recessed card look.
They only affect the live preview, not the generated code, so you can check how the shadow reads against colours close to your actual design instead of the tool's default white-on-grey.
No, this tool generates a single box-shadow value. CSS supports comma-separated multiple shadows on one element, but you would need to generate each layer here separately and combine them by hand.
Yes. Negative horizontal or vertical offset moves the shadow left or up instead of right or down, and negative spread shrinks the shadow smaller than the element itself -- useful for a tight inner glow, especially combined with Inset.