Box Shadow Generator
Build CSS box-shadow visually. Layer multiple shadows for realistic depth (e.g., Material elevation), toggle inset for pressed effects, and preview live on a customizable background. Copy production-ready CSS with proper alpha compositing.
.element {
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
}About Box Shadow Generator
Realistic shadows in modern UI never come from a single CSS box-shadow value — they always layer multiple shadows with different offsets, blurs, and opacities to reproduce how light actually falls on surfaces. Material Design's elevation system uses 2-3 layered shadows per level. Apple's Human Interface Guidelines follow the same pattern. This Box Shadow Generator makes layering easy: add as many layers as you need, tune each independently, and copy the multi-shadow CSS in one snippet.
The tool includes 6 presets (Material sm/md/lg, Soft glow, Neumorphism, Inset well) that demonstrate common shadow patterns. Toggle 'inset' on any layer to flip that shadow to the inside of the element — great for pressed-button and form-input styles. Customize the preview background color to see how the shadow reads on light vs dark UI. The output CSS uses rgba() colors with alpha compositing for realistic shadow blending.
How to Use
Adjust X/Y offsets, blur, spread, color, and opacity for each shadow layer.
Add multiple layers with the + button — realistic elevation shadows combine 2-3 layers with different offsets and opacities.
Toggle 'inset' for shadows on the inside of the box (pressed-button effect).
Change the preview background to see how the shadow reads on light or dark UI.
Load a preset (Material sm/md/lg, Neumorphism, Inset well) to see how experienced designers layer shadows.
Frequently Asked Questions
Why layer multiple shadows?
Real-world shadows have soft edges close to the object and long, faint tails farther out. A single CSS shadow can't reproduce this — you need at least two layers (one tight+dark, one broad+faint) to get realistic depth. Material Design's elevation system uses this exact approach.
What is inset?
The inset keyword flips the shadow from outside the box to inside, creating a pressed or well effect. Useful for form inputs, buttons in pressed state, and inset toggles.
How do I keep shadows crisp on retina displays?
Use whole-pixel values for blur and spread. Sub-pixel values render slightly blurrier due to browser anti-aliasing. This tool uses integer inputs by default.
Are box-shadows expensive to render?
Yes, especially large blur values. If you're animating box-shadow on many elements, consider using CSS filter: drop-shadow() or a background image for better performance. Static shadows on a handful of elements are fine.