🌒 CSS Box Shadow Generator

Build single or layered box shadows visually — X/Y offset, blur, spread, color, and inset per layer — and copy the finished CSS.

About this tool

Design CSS box shadows visually — offset, blur, spread, colour and opacity, inset or outset — and stack multiple layers for realistic depth. The preview updates live and the finished box-shadow declaration is one click away.

Layered shadows are what make modern cards and modals look soft and natural; doing it by hand means guessing numbers. This makes it visual.

How to use it

  1. Adjust offset, blur, spread and colour with the sliders.
  2. Add more layers for softer, more realistic shadows.
  3. Copy the CSS.

Frequently asked questions

Why use several shadow layers?

A single large blur looks flat. Two or three layers with increasing blur and decreasing opacity mimic how real light falls off.

Does box-shadow affect performance?

Large blurred shadows on many animated elements can be costly. For static elements it is negligible.

Free, private, no account. Like every DevForge tool, this one runs in your browser and never uploads your files. See all 35 free tools or join the DevForge community to share your own games, tools and assets.