MotionShine01 / Sliders
Offset, blur, spread
Move the shadow across and down, soften it with blur, and grow or shrink it with spread.
Free tool
Box shadow generator, soft, sharp or layered.
Shape a CSS box shadow with sliders for the offset, blur, spread and opacity, pick its colour, make it inset, and stack several layers for the soft, natural shadows modern designs use. Set the box colour, the page colour and the corner radius to see it in place, start from a preset, and copy the CSS.
Made in your browser. Nothing is sent anywhere.
Natural shadows
Layers look more real.
02 / Layers
Stack them
A tight, light shadow plus a wide, soft one looks more like real light than one shadow.
03 / Copy
Ready CSS
The box-shadow line and the radius, with rgba colours for the opacity.
Questions
Good to know.
How do I make a CSS box shadow?
Move the sliders until it looks right, then press Copy CSS.
What does spread do?
It grows (positive) or shrinks (negative) the shadow before the blur. A negative spread keeps a soft shadow tucked under the box.
What is an inset shadow?
A shadow inside the box, so it looks pressed in.
Why use several layers?
Real shadows are sharp near the object and soft further away; layers copy that.
Is it saved?
Your last design is kept in this browser.