Gearboxly

Free Box Shadow Generator

Design CSS box shadows visually.

Feedback Report issue
Loading tool…

About the Box Shadow Generator

Free CSS box-shadow generator. Adjust offset, blur, spread, color and inset to design a shadow, preview it live and copy the CSS.

How it works

  1. 1

    Adjust the sliders

    Set offset, blur, spread and color.

  2. 2

    Preview live

    See the shadow update instantly.

  3. 3

    Copy CSS

    Paste the box-shadow into your styles.

Frequently asked questions

Yes — toggle inset to create inner shadows.

Yes — the box-shadow value is one click to copy.

Related tools

Popular

CSS Gradient Generator

Build linear gradients and copy the CSS.

Open tool

Color Palette Generator

Generate shades, tints and harmonies.

Open tool

Border Radius Generator

Craft rounded corners and copy the CSS.

Open tool

Random Color Generator

Generate random colors with hex codes.

Open tool
Browse all tools →