Keep opacity low
Values between 8% and 25% usually look most natural.
CSS Box-Shadow Generator
Get realistic, layered shadows for cards, buttons and modals without trial and error. Adjust each layer with sliders, preview it on your own colours and copy the CSS.
- 100% free
- No sign-up
- Runs in your browser
Presets:
How to use
How to use the CSS Box-Shadow Generator
- Start from a preset or the default card shadow.
- Adjust offset, blur, spread, colour and opacity for each layer.
- Add layers for more natural depth, or tick Inset for inner shadows.
- Copy the CSS.
Private by design. Shadows are created in your browser. Nothing is uploaded or stored.
About this tool
Why layered shadows look more natural
Real objects cast more than one shadow: a sharp, dark shadow close to the surface and a softer, wider one further out. Combining two or three box-shadow layers with low opacity imitates that, which is why modern interfaces use stacked shadows rather than one heavy one.
Spread grows or shrinks the shadow before blurring, which helps keep large shadows from spilling out too far. Inset shadows are drawn inside the element, useful for pressed buttons and input fields.
Good to know
Shadow tips
Tint the shadow
A dark blue or brand-tinted shadow looks richer than pure black.
Match the light source
Use positive Y offsets so light appears to come from above.
Mind performance
Very large blurred shadows on many elements can slow scrolling on older phones.
FAQ
CSS Box-Shadow Generator FAQs
What do the four box-shadow numbers mean?
Horizontal offset, vertical offset, blur radius and spread radius, followed by the colour.
Can I add more than one shadow?
Yes. Layers are combined into one comma-separated box-shadow value.
What is an inset shadow?
A shadow drawn inside the element's border instead of outside it.
Does box-shadow affect layout?
No. Shadows do not take up space or move other elements.
Need extra development capacity?
Hire dedicated developers from iCreativez who work as part of your team.