Box shadow generator
Adjust shadows visually with offsets, blur, spread, color and inset controls.
How it works & useful details
How to use this tool
Move the shadow with horizontal and vertical controls, then tune blur, spread and opacity through its color.
Supported values and limitations
Exports one CSS box-shadow. Offsets range from -100 to 100px, blur from 0 to 150px, and spread from -80 to 80px. The preview stage clips effects that extend outside its bounds.
About this tool
Box shadow generator builds layered shadows with controls for horizontal and vertical offset, blur, spread, color, and inset. Adjusting the values visually is faster than guessing at a box-shadow declaration and reloading a page.
The preview shows the shadow on a sample surface, and the CSS output is ready to paste. Everything is local, and the generated declaration is the only thing that leaves the workspace.
How to use it
- Set the horizontal and vertical offsets to position the shadow.
- Adjust blur and spread to soften or extend it.
- Pick a color and opacity, and toggle inset for an inner shadow.
- Copy the generated box-shadow value into your stylesheet.
Worked example
box-shadow: 0px 12px 32px -8px rgb(0 0 0 / 0.2);The values are horizontal offset, vertical offset, blur radius, spread, and color. A downward offset with a large blur and negative spread makes a soft shadow that sits below the element instead of spreading around all sides. That is the "floating card" look used by most modern interfaces.
Shadows that look natural
- Use low opacity (0.1–0.25) rather than solid grey. Real shadows are translucent.
- Keep the light source consistent: if one element's shadow falls downward, all of them should.
- Increase offset and blur together to signal elevation. Small for buttons, larger for dropdowns and dialogs.
- Layer two shadows, one tight and dark and one wide and faint, for extra realism. Separate them with a comma in CSS.
Inset shadows draw inside the element, which is useful for pressed buttons and input fields. On dark backgrounds, shadows are barely visible. Use lighter surfaces or borders to show elevation instead.
Frequently asked questions
What is the difference between blur and spread?
Blur softens the shadow edge, while spread expands or contracts the shadow shape before blurring.
How do I create multiple shadows?
Add another shadow layer in the tool and order the layers so the closest shadow is listed first.
Why does a large shadow look different on my page?
Shadows render over the surrounding background, so contrast with the surface behind the element changes the perceived depth.
Do box shadows slow down a page?
Static shadows are cheap. Animating large blurred shadows can cause jank. Animate the opacity of a pseudo-element that carries the shadow instead.