Box Shadow Generator
Visually create CSS box-shadows and copy the code instantly.
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.25);
Missing a tool?
Tell us what you'd like us to build next. We read every suggestion, and your email is optional.
What this tool does
The Box Shadow Generator lets you design a CSS box-shadow with sliders, see it live, and copy the code.
How to use it
- Move the sliders for the offsets, blur and spread.
- Pick a color and opacity, and tick Inset for a shadow inside the box.
- Click Copy and paste the line into your CSS.
What each value does
box-shadow: [inset] x-offset y-offset blur spread color;
- Horizontal offset: positive moves the shadow right, negative left.
- Vertical offset: positive moves it down, negative up.
- Blur: 0 gives a sharp edge; higher values soften it. It can't be negative.
- Spread: positive makes the shadow bigger than the box, negative smaller.
- Color: written as rgba(), so the last number is the opacity (0 to 1).
- Inset: draws the shadow inside the box, as if it were pressed in.
Tips for natural shadows
- Keep the opacity low (0.1 to 0.3); real shadows are rarely solid black.
- Offset mostly downward, as if the light came from above.
- For more depth, combine shadows in one rule, separated by commas: a small sharp one plus a large soft one.
Three ready-made recipes
- Subtle card:
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);Two soft layers close to the box, so it barely lifts off the page. - Raised on hover:
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);A bigger offset and blur make the element look closer. Add a short transition so it doesn't jump. - Pressed or inner field:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);A soft inset shadow at the top makes a text box or pressed button look set into the page.
The generator makes one shadow at a time. To layer two, copy both values and join them with a comma, as in the first recipe.
Frequently asked questions
Does box-shadow work in all browsers?
Yes, every current browser supports it without prefixes.
Does a shadow change the layout?
No. Shadows are drawn outside the box's layout, so they never push other elements around.
box-shadow or filter: drop-shadow()?
box-shadow follows the element's box, including rounded corners. filter: drop-shadow() follows the visible shape, so use it for transparent PNGs and icons. Drop shadows have no inset and don't support a spread value.
Do shadows work in dark mode?
They're much harder to see on dark backgrounds. Dark designs usually show depth with slightly lighter surfaces or thin borders instead, and keep shadows for things that float, like menus and dialogs.
Sources: MDN Web Docs, box-shadow; W3C, CSS Backgrounds and Borders Module Level 3. MDN Web Docs, drop-shadow(). Last reviewed on SuiteWebTools: October 2026.