Box Shadow Generator

The box-shadow property adds shadow effects around an element's box. You control position, blur, spread, color—all from CSS. Shadows can go outside (drop shadow) or inside (inset shadow) your element.

Why use them? They create depth and hierarchy. Cards, buttons, modals—shadows make them pop off the page. Way lighter than image-based shadows, easier to tweak, and they scale perfectly.

Basic syntax: box-shadow: horizontal vertical blur spread color. Try box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) for a subtle drop shadow.

Modern browsers let you stack multiple shadows on one element for complex lighting effects. Super useful for creating realistic depth.

Four values plus a color: box-shadow: h-offset v-offset blur spread color.

• Horizontal offset: Moves shadow left (negative) or right (positive)
• Vertical offset: Moves it up (negative) or down (positive)
• Blur radius: Makes shadows softer—bigger values = softer shadows
• Spread: Expands or shrinks the shadow before blurring
• Color: Any CSS color value—I usually go with rgba() for transparency

Example: box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.2). That's 2px right, 4px down, 8px blur, 2px spread, 20% black. Want an inner shadow? Add inset at the start.

Outset (drop) shadows sit outside your element—makes it look elevated, like it's floating above the page. That's the default. Perfect for buttons, cards, anything that should feel like it's lifting off. Inset shadows go inside, making content look pressed in or recessed. Add the inset keyword: box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1).

You can combine both on one element: box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.05). Outer glow plus inner depth. Super useful for realistic buttons.

Separate them with commas. Each shadow renders independently—first one on top, rest layer beneath.

Layered shadows look way more natural. Try this: box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07). Three shadows at different distances mimic how light actually works.

Common tricks: colored shadow on top for highlights, neutral ones below for depth, spread values for glows.

Stick to 2-4 shadows for performance though. Too many and rendering slows down, especially with animations.

Use multiple layers with different blur and opacity. Start with a tight, sharp shadow for definition. Add bigger, softer ones for ambient light. Like this: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24).

Keep opacity low—0.05 to 0.15 works for subtle shadows. Skip pure black—use rgba(0,0,0,0.1) instead. Real shadows have color casts, so try very light blues or grays for extra realism.

Think about your light source. Light from above? Shadow goes below (positive vertical offset). Light from below? Shadow above (negative).

For elevated elements, increase blur and spread as distance grows. Material Design and iOS have great shadow systems worth checking out.

It's pretty performant—doesn't mess with document flow or positioning. But complex shadows (lots of layers, huge blur, animated shadows) can slow things down on weaker devices.

For best performance: max 2-3 layers per element, don't animate box-shadow directly (use transform or opacity), add will-change: box-shadow for elements that'll animate. Always test on mobile—tighter constraints there.