What a box-shadow declaration contains
Five numbers and a colour: offset-x offset-y blur-radius spread-radius colour. Offset moves the shadow, blur softens the edge, spread grows or shrinks the shadow before blurring, and inset flips it inside the element. The generator exposes each of those as a slider so you can feel the relationship instead of guessing numbers.
Reading the sliders
Offset Y is what sells elevation: a positive Y with a slight blur reads as a raised card. Negative spread tightens the shadow under the element — the modern 'floating card' look. Opacity matters more than colour: 15–25% is usually enough; anything above 40% looks like a 2010 drop shadow.
Common recipes
- Card: 0 12px 30px −6px, 25% black
- Button hover: 0 6px 16px −4px, 30% of the button hue
- Modal: 0 24px 60px −12px, 35% black
- Pressed state: inset 0 2px 4px, 20% black
Performance and dark mode
Box shadows are cheap to paint but expensive to animate — animating blur or spread triggers repaints every frame. Animate transform and opacity instead, or bake the shadow into a pseudo-element. In dark mode, shadows barely read; pair them with a subtle border or a lighter surface colour.
Frequently Asked Questions
Why is my shadow invisible?
Usually a transparent colour or a spread that cancels the element size. Check that the colour has an opacity above 10% and that spread is not a large negative number.
Can I layer multiple shadows?
Yes — comma-separate them. The generator produces one layer; paste additional layers after the comma to build depth, contact shadows plus ambient glow.
Box shadow vs drop shadow filter?
Box-shadow follows the border box (rectangles, rounded rectangles). drop-shadow() follows the alpha shape, which is what you need for PNG or SVG silhouettes.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.