What does spread-radius do?

Spread radius expands or contracts the shadow uniformly in all directions before blurring. A positive value makes the shadow larger; negative makes it smaller than the element.

Can I stack multiple shadows?

Yes — separate multiple shadow values with commas: box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.1). The first value is rendered on top.

CSS Box Shadow Generator — Build box-shadow Visually

box-shadow Syntax Reference

box-shadow: offset-x offset-y blur spread color [inset];

Parameter	Description	Example
offset-x	Horizontal shadow offset (positive = right)	`4px`
offset-y	Vertical shadow offset (positive = down)	`8px`
blur-radius	Blur amount — 0 is a sharp edge	`16px`
spread-radius	Expands (+) or shrinks (−) the shadow	`2px`
color	Shadow color, often with alpha	`rgba(0,0,0,.3)`
inset	Places shadow inside the element	`inset`

How to Use It

Open the tool

Go to CSS & Frontend and scroll to the Box Shadow Generator.

Set offset and blur

Use sliders for X offset, Y offset, and blur radius. Watch the live preview update.

Adjust spread and color

Set spread radius and pick a shadow color with alpha transparency. Toggle Inset for inner shadows.

Copy the CSS

Copy the complete box-shadow value and paste it into your CSS rule.

Pro Tips

💡Layer two shadows for a natural look: a close sharp one (0 2px 4px rgba(0,0,0,.15)) and a diffuse distant one (0 8px 24px rgba(0,0,0,.1)).

💡Use negative spread with blur to create a subtle directional shadow that stays close to the element.

💡For neumorphic designs, use two inset shadows — one light and one dark — on a matching background color.

Frequently Asked Questions

What are the box-shadow parameters?

offset-x offset-y blur spread color — and optionally inset. All length values are in CSS units (px, rem, em). Example: box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.3).

What does spread do?

Spread expands or contracts the shadow before blurring. Positive values grow the shadow beyond the element size; negative values shrink it.

What does inset do?

Places the shadow inside the element border, creating a "pressed in" or concave appearance — useful for active state buttons.

Can I use multiple shadows?

Yes — comma-separate multiple shadow values. The first is rendered on top: box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.1).

Build your box shadow now

Open the Box Shadow Generator and create any shadow effect visually — no CSS memorisation needed.

Open Box Shadow Generator →