← All text tools

Shadow scale generator

Make a set of matching box shadows (elevation levels) as CSS variables.

  • Free
  • No sign-up
  • Works on any device

About Shadow scale generator

Design systems use a set of elevation levels rather than random shadows. This tool creates matching box-shadow values from small to large with consistent angle, blur growth and opacity, and outputs them as CSS custom properties like --shadow-sm and --shadow-lg so cards, menus and modals stay coherent.

How to use Shadow scale generator

  1. Set the options above. The result updates live.
  2. Change anything until it's just right.
  3. Copy the result or download it.

Why use this tool?

Also known as

Frequently asked questions

Why use layered shadows instead of one?

Several soft shadows stacked with growing blur look more natural than a single heavy one, because real light produces both a tight contact shadow and a wide ambient one.

Is Shadow scale generator free?

Yes. Shadow scale generator on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Related tools