mAIbmAIbTools

CSS Box-Shadow Generator

Design a CSS box-shadow visually and copy the code in one click.

How to use

  1. Drag the sliders for offset, blur and spread.
  2. Pick a shadow color and opacity.
  3. Copy the generated box-shadow CSS.
Advertisement336 × 280

FAQ

What does spread do?

Spread grows or shrinks the shadow before the blur is applied — negative values tuck it under the element.

Can I add multiple shadows?

This builds one shadow; you can stack several by separating them with commas in your CSS.

Advertisement728 × 90