About CSS Box Shadow Builder

Generate CSS box-shadow values from parameters. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.

Use Cases

• Generate CSS for card hover effects and elevated UI components
• Build neumorphic (soft UI) designs with inset and outset shadow combinations
• Create Material Design elevation shadows with multiple layers
• Design subtle drop shadows for modals, popovers, and floating elements

Tips

• Add multiple shadow layers to create realistic depth and soft ambient lighting effects
• Toggle inset for inner shadows — useful for pressed-button states and input field styling
• Adjust blur radius and spread separately: blur softens edges while spread controls shadow size

Fun Facts

• Box shadows are one of the most expensive CSS properties to render. Using will-change: transform can help browsers optimize shadow animations.
• CSS box-shadow was first proposed in CSS2 (1998) but wasn't reliably implemented across browsers until CSS3 in 2011.
• Material Design's elevation system uses up to 3 layered box shadows per element to simulate realistic depth and light direction.

FAQ

Single or multiple shadows?

Multiple — layer up to 10 shadows for complex effects (neon glow, multi-directional lighting, double-border simulation). Order matters — later shadows render on top.

What's the `inset` keyword?

Makes the shadow appear inside the element instead of around it. Combine with outer shadows for pressed-in-a-box effects or soft UI.

How does spread differ from blur?

Blur softens edges. Spread grows (+) or shrinks (-) the shadow's size. Use spread to create visible borders without affecting the element's layout.

Does it generate accessible defaults?

Subtle ones — contrast-conscious, no overly-dark shadows that fail AA contrast for nearby text. Always preview with actual content to verify readability.