Generators tool

Box Shadow Generator

Design layered CSS box shadows and copy the code.

Free Runs in your browser
Layers

About this tool

Box Shadow Generator gives you sliders for every box-shadow value and shows the result on a sample card. Stack several layers for soft, realistic depth, then copy the finished CSS.

How to use Box Shadow Generator

  1. Adjust offset, blur, spread, colour and opacity for the first layer.
  2. Add more layers or try the soft preset for natural depth.
  3. Copy the CSS and use it in your project.

Questions people ask

What is the difference between blur and spread?

Blur softens the edge of the shadow. Spread grows (positive) or shrinks (negative) the shadow before blurring. A negative spread with a large blur gives a soft, tight shadow.

Why use more than one shadow layer?

Real shadows have a sharp part close to the object and a soft part further away. Two or three layers with different blur values look more natural than one.

What does inset do?

Inset draws the shadow inside the element instead of outside, which makes it look pressed in.

More generators tools

See all 14 →
Random Number GeneratorPick random numbers in any range, with no repeats. Coin FlipFlip a virtual coin with history and streak stats. Dice RollerRoll 1–10 dice: d4, d6, d8, d10, d12 or d20. Spin the WheelRandom name picker wheel with your own entries. Barcode GeneratorCode 128, EAN-13, UPC-A, Code 39 and ITF barcodes. Username GeneratorCatchy usernames for games, social media and more.
Esc