CSS Box Shadow Builder

Build multi-layer CSS box shadows visually with live preview. Copy the CSS with one click.

X offset0px

Y offset4px

Blur16px

Spread0px

Opacity20%

Color

Inset

CSS Output

box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.20);

About this tool

Build CSS box-shadow effects visually with real-time preview. Control X/Y offset, blur radius, spread radius, colour, opacity, and inset direction. Stack multiple shadows for depth effects. Get the generated CSS code instantly. Create buttons, cards, modals, and floating elements with the right elevation for your design system.

How to Build a CSS Box Shadow

1Adjust the X and Y sliders to set shadow direction.
2Increase the blur for softer shadows or decrease for harder edges.
3Use spread to grow or shrink the shadow size.
4Click 'Add Layer' to stack a second shadow for richer depth.
5Copy the generated CSS and paste it into your stylesheet.

Frequently Asked Questions

What is the CSS box-shadow syntax?+

box-shadow: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1). Inset shadows go inside the element: box-shadow: inset 0 2px 4px rgba(0,0,0,0.15).

How do I create a realistic elevation effect?+

Use two shadows: a small ambient shadow (large spread, low opacity) and a direct shadow (small spread, higher opacity). Material Design uses this technique with layered shadows for each elevation level.

Can I stack multiple box shadows?+

Yes. Separate multiple shadow values with commas. Stacking creates richer, more natural-looking shadows - a common pattern is one soft ambient shadow plus one sharper directional shadow.

What is an inset box shadow?+

The inset keyword makes the shadow appear inside the element rather than outside. Useful for pressed button states, inner glow effects, and neumorphic designs.

Looking for a deeper guide on this topic? Browse the Searchlight blog.

Visit the blog →

Related tools

View all Generators →