Design realistic depth with a visual CSS box shadow generator
This CSS box shadow generator turns the multi-value box-shadow property into a set of intuitive sliders. Instead of guessing at offsets and blur radii, you tune each parameter against a live preview and copy production-ready code in CSS, Tailwind, or SCSS form. Per MDN, a box shadow is described by X and Y offsets, blur and spread radius, and color — and you can stack many of them with commas to build convincing elevation.
What each control does
- Offset X / Y — moves the shadow horizontally and vertically. Negative X pushes left, negative Y pushes up.
- Blur — softens the edge. Larger values produce a bigger, lighter, more diffuse shadow.
- Spread — grows or shrinks the shadow shape itself; negative spread is great for tight card shadows.
- Color & alpha — pick any color with transparency. Most realistic shadows use semi-transparent black or a tinted version of the surface color.
- Inset — flips the shadow inside the frame so the element looks pressed into the page.
Stack layers for realistic elevation
Real-world light produces several overlapping shadows, so a single layer rarely looks right. Add a tight, near-opaque ambient shadow plus a wider, softer drop shadow to mimic Material-style elevation. The generator outputs them as a comma-separated list:
box-shadow:
0 1px 2px rgba(0,0,0,0.08),
0 8px 24px rgba(0,0,0,0.12);If you are matching a framework, browse the Material Design palette or the Tailwind CSS colors to pick a tint that harmonizes with your surface color rather than pure black.
Export to CSS, Tailwind, or SCSS
Every layer you build can be copied as standard CSS, a Tailwind arbitrary value such as shadow-[0_8px_24px_rgba(0,0,0,0.12)], or a reusable SCSS variable for design tokens. That way the same shadow drops cleanly into a vanilla stylesheet, a utility-first project, or a tokenized system.
Pair shadows with the rest of your UI
Shadows rarely live alone. After you finalize a shadow, check legibility with the contrast checker so the shadow color does not muddy text on the surface, and explore the soft-UI alternative with the neumorphism generator when a single dual-tone shadow fits the brief better. For frosted card surfaces that sit on top of imagery, combine your shadow with the glassmorphism generator for a layered, modern look.