shadow-scale

Shadow Scale Generator

Overview

Generate consistent elevation scales using layered box-shadows. Creates depth hierarchy from subtle lifts to dramatic floats with proper blur, spread, and opacity progressions.

When to Use

• Setting up elevation tokens for a new project
• Creating card/modal depth hierarchy
• Standardizing shadow styles across components
• Building dark mode shadow variants

Quick Reference

Level	Typical Use	Character
none	Flat elements	No elevation
xs	Subtle lift	Barely raised
sm	Cards, buttons	Slight depth
md	Dropdowns, tooltips	Clear separation
lg	Modals, popovers	Floating
xl	Dialogs, drawers	High elevation
2xl	Full overlays	Maximum depth

The Process

1. Get base color: Shadow color (default: black with opacity)
2. Ask style:
   • Soft - Large blur, low opacity (modern, subtle)
   • Sharp - Small blur, higher opacity (defined edges)
   • Layered - Multiple shadows per level (most realistic)
3. Ask levels: How many elevation steps (5-7 typical)
4. Ask dark mode: Generate inverted/adjusted dark mode variants?
5. Ask format: CSS, Tailwind, or JSON?
6. Generate: Create scale with progressive blur/spread/opacity

Shadow Styles

Style	Character	Best For
Soft	Diffuse, gentle	Modern UI, cards, light themes
Sharp	Defined, crisp	Buttons, data-dense UI
Layered	Realistic, nuanced	Premium feel, modals

Layered shadows use 2-3 shadow layers per level:

• Ambient layer: Large blur, low opacity (environmental light)
• Key layer: Medium blur, medium opacity (directional light)
• Edge layer: Minimal blur, subtle (contact shadow)

Output Formats

CSS Custom Properties (Layered):

:root {
  --shadow-none: none;
  --shadow-xs:
    0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl:
    0 25px 50px -12px rgb(0 0 0 / 0.25);
}