Box Shadow Generator
Design custom CSS box shadows with multiple layer support, blur, spread, inset options, and instant previewing.
Layers
What is a Box Shadow in CSS?
The CSS box-shadow property attaches one or more shadows to an element. It allows you to create elevation, depth, and contrast, separating card layers from the viewport backgrounds.
Why Use a CSS Box Shadow?
Adding depth is a fundamental principle of material and flat design. Shadows give visual feedback about interaction layers, elevating elements on hover, and creating sleek premium UI card containers without relying on heavy graphic assets.
CSS Syntax & Controls
A box shadow is defined by X and Y offsets (which determine direction), a blur radius (how soft the shadow edges are), a spread radius (which expands or shrinks the shadow size), and the shadow color. You can also stack multiple shadows by separating them with commas.
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;Best Practices
- Use soft, high-blur shadows with low opacity (between 4% and 12%) for a subtle premium look.
- Stack multiple shadow layers to emulate realistic ambient occlusion lights.
- Match the shadow color temperature with your background (e.g. use dark blue shadows on blue backgrounds instead of flat grey).
Common Mistakes
- Using high-opacity, pitch-black shadows (#000) which look outdated and cheap.
- Applying excessive offsets without enough blur, making shadows look misaligned.
- Forgetting to check contrast accessibility on dark theme modes.
Step-by-Step Guide: How to Use this Generator
- Adjust the horizontal (X) and vertical (Y) offsets to position the light source.
- Increase the blur radius to soften the edges for a realistic look.
- Set the color and lower the opacity slider to blend the shadow with the background.
- Toggle the 'Inset' checkbox if you want a sunken button or form field effect.
Browser Compatibility
| Chrome | Safari | Firefox | Edge |
|---|---|---|---|
| Yes (Full) | Yes (Full) | Yes (Full) | Yes (Full) |
Frequently Asked Questions (FAQ)
What is the difference between inset and outset box shadows?
An outset shadow (default) projects outward from the element, creating elevation. An inset shadow projects inward, making the element look pressed or sunken into the page.
Can I stack multiple box shadows?
Yes, you can separate multiple shadow layers with a comma. Layers are painted front-to-back: the first declared shadow is on top.