Box Shadow Generator
Build soft, realistic shadows by layering several box-shadows, as modern UI kits do.
Runs in your browser. Nothing is uploaded Free, no sign-up Works on mobile
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
0px 10px 15px -3px rgba(0, 0, 0, 0.1);
border-radius: 16px;Horizontal offset: 0
Vertical offset: 4
Blur: 6
Spread: -1
Opacity %: 10
Corner radius: 16px
How to use Box Shadow Generator
- Adjust offset, blur, spread and opacity of each shadow.
- Add more layers for softer, more natural depth.
- Copy the CSS.
Frequently asked questions
Why use more than one shadow?
Real shadows have a sharp contact shadow and a soft ambient one. Two or three layers look more natural than a single large blur.
What does inset do?
It draws the shadow inside the element, which is useful for pressed buttons and input fields.
Related tools
All Developer Tools →- CSS Gradient Generator Design gradient backgrounds visually and copy the CSS.
- Glassmorphism Generator Create the frosted-glass card effect used in modern app and website designs.
- Flexbox Playground Understand flexbox by changing properties and watching the items move.
- CSS Grid Generator Create grid layouts visually, including responsive card grids that need no media queries.
- JSONPath Tester Write and debug JSONPath queries used in API tests, Postman, Kubernetes and data pipelines.
- User Agent Parser Find out which browser, OS and device a user agent string belongs to, for debugging and analytics.