All Tools
Home/Generator Tools/CSS Box Shadow Generator

CSS Box Shadow Generator

Create box shadows visually

Preview

20%
Advertisement Space

Related Tools

Border Radius Gradient
CSS Box Shadow Generator: A CSS box-shadow generator builds drop-shadow and inset-shadow effects visually and outputs the exact box-shadow code. Adjust offset, blur, spread, color and opacity, preview live, then copy the CSS — including multi-layer shadows.

Frequently Asked Questions

What does box-shadow do in CSS?
box-shadow adds a shadow around an element's frame. Its values are horizontal offset, vertical offset, blur radius, spread radius, and color — for example box-shadow: 0 4px 12px rgba(0,0,0,0.15).
How do I create a soft, subtle shadow?
Use a small vertical offset, a moderate blur, no spread, and a low-opacity black such as rgba(0,0,0,0.1). Soft shadows read as more modern and less harsh than dark, tight shadows.
What is the inset keyword in box-shadow?
Adding the inset keyword draws the shadow inside the element instead of outside, creating a pressed or recessed look often used for input fields and toggles.
Can I add multiple shadows to one element?
Yes. Separate each shadow with a comma in the same box-shadow declaration. Layering two or three shadows with different blur values creates realistic, layered depth.

Go deeper

Read the SnoopTool guide behind this tool

The calculator gives you the number. These SnoopTool guides explain the method, the assumptions and the decision — with worked examples, data tables and FAQs.

Browse all SnoopTool guides →

Powered by Zoopcoder | © 2025 SnoopTool. All rights reserved.

📤 Share This Tool
Found this useful? Share with friends!

Answers, not just a number

Short, exact answers to the questions people ask alongside this tool — the number first, then the working.

For teams, not just visitors

Want this calculator on your own site?

We build the calculators on SnoopTool as embeddable widgets in your branding, wired to your own lead form — the same maths, your colours, your domain, your leads. Tell us which one and we will send back a working demo you can put in front of your team.

One reply from a person, within one business day. No newsletter, no sequence. See our privacy policy.