All tools
Design tools

CSS Box-Shadow Generator

Create and preview CSS box-shadows visually — layer multiple shadows, adjust every parameter, and copy the production-ready code in one click.

Offset X & Y Blur radius Spread radius Inset shadows Multiple layers Copy CSS
Get started free Sign in

Free · No credit card · 50 credits/day

Box-shadow property reference

Property Values Effect
offset-x px (positive = right, negative = left) Horizontal shadow position
offset-y px (positive = down, negative = up) Vertical shadow position
blur-radius 0 = sharp edge, higher = softer blur Softness/feathering of the shadow
spread-radius positive = larger, negative = smaller Size of the shadow relative to element
color any CSS color (rgba for transparency) Shadow color — use low opacity for realism
inset keyword (optional) Renders shadow inside element, not outside

Syntax: box-shadow: offset-x offset-y blur spread color; — separate multiple shadows with commas.

Frequently asked questions

What do the box-shadow values mean?

box-shadow takes: offset-x (positive = right), offset-y (positive = down), blur-radius (0 = sharp, higher = softer), spread-radius (positive = larger), color, and optional inset keyword. Example: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1). Comma-separate multiple shadows — later shadows render below earlier ones.

What is the difference between box-shadow and filter: drop-shadow()?

box-shadow respects the rectangular bounding box — it won't follow an image with transparent background. filter: drop-shadow() follows the actual visual outline (alpha channel), so it works correctly on PNGs, SVGs and irregular shapes. For cards: box-shadow. For icons with transparency: drop-shadow().

How do I create an inset box-shadow?

Add the inset keyword: box-shadow: inset 0 2px 4px rgba(0,0,0,0.15). This places the shadow inside the element, creating a pressed or recessed effect. Useful for input fields (active state), pressed buttons, and inner borders. Combine inset and outer shadows by comma-separating them.

How do I make a shadow that only shows on one side?

Use a negative spread-radius combined with a specific y-offset: box-shadow: 0 4px 6px -4px rgba(0,0,0,0.3). The negative spread shrinks the shadow, hiding it on the left and right — leaving only the bottom shadow visible.

Related design tools

More CSS visual tools.

CSS Gradient Generator

Build beautiful backgrounds to pair with your shadow effects.

 Border-Radius Visualizer

Round your corners interactively alongside your shadow styling.

 CSS Animation Generator

Add hover animations that reveal or change your box-shadows.

Perfect shadows, every time

Free account. 50 credits per day. Access to 75+ tools instantly.

Create free account →