CSS Box-Shadow Generator
Build single or layered box-shadows with a live preview and copy the CSS.
box-shadow: 0px 10px 25px -5px #0f172a40;
About this tool
The CSS Box-Shadow Generator lets you design box shadows precisely instead of guessing pixel values by hand. Drag the controls and the result changes in real time, so you can dial in exactly the look you want and copy production-ready CSS in a single click. It is built for web developers and designers who want clean, modern shadows fast.
The standout feature is support for layered box-shadows — a popular technique for soft, realistic depth. Rather than relying on one hard shadow, you can stack several shadows with different offsets and blur amounts so a card, button, or modal appears to float naturally above the page. Each layer is rendered together and merged into one valid box-shadow declaration.
You get full control over every value that matters when you want to create a CSS shadow:
- Horizontal and vertical offsets set the direction the shadow falls
- Blur radius makes the edge crisp or soft
- Spread radius expands or contracts the shadow size
- Color and opacity, freely chosen to match your theme
- Inset mode for shadows that sit inside the box
Every time you change a value, the css box shadow code updates and is ready to copy. The output is standard CSS that works across all browsers and frameworks, with no vendor lock-in. The whole tool runs in your browser, is free to use, requires no account, and never uploads any data. Looking to polish your UI further? Explore more design and dev utilities on our tools page.
How to use
- 1Adjust the shadow values: horizontal offset (X), vertical offset (Y), blur, spread, and color
- 2Watch the live preview update instantly as you tweak each value
- 3Add multiple shadow layers to build depth or stacked-shadow effects
- 4Toggle inset mode to place the shadow inside the box instead of outside
- 5Click copy to grab the CSS and paste it straight into your stylesheet
Frequently asked questions
- Is this tool free to use?
- Yes, it is completely free with no signup. It runs entirely in your browser and nothing is sent to a server.
- How do layered box-shadows work?
- CSS lets you list several shadows in one property separated by commas. The first shadow sits on top, and this tool combines all layers for you automatically.
- What is the difference between spread and blur?
- Blur controls how soft the shadow edge is, while spread grows or shrinks the shadow size before it blurs. Use them together to tune softness and scale.
- What does an inset shadow do?
- An inset shadow appears inside the box rather than outside, which is great for pressed-in fields or inner-depth effects.
- Which frameworks can I use the output with?
- It is standard CSS, so it works anywhere — plain HTML, React, Vue, or Tailwind via an arbitrary value.