Online Tool Store
UI Shadow Scale Generator
Generate a compact set of consistent CSS elevation shadows from a base color and softness setting, with a browser-only copy-ready preview.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Elevation system
Build a consistent shadow scale
Preview surface
How the UI Shadow Scale Generator works
- Start from a preset or the custom generator: choose a shadow colour (picker or hex) and a light direction.
- Set how many elevation levels you want (2–8), then dial in Intensity (overall shadow strength) and Softness (blur spread relative to the offset).
- Keep Layered shadows on for realistic stacked depth, or switch it off for single-layer shadows. Optionally rename the tokens from xs/sm/md… to a numeric 1–N scale.
- Preview every level as a card, and toggle the surface between Light and Dark to check the shadows hold up on both.
- Pick an output format — CSS custom properties, Tailwind v4
@theme, Tailwind v3 config, SCSS variables or JSON tokens. - Copy the whole scale, copy a single level from its preview card, or download it as a file. Or load the Tailwind CSS v4 / v3 preset to get Tailwind’s exact official shadow values.
FAQ
What is a shadow scale?
A shadow scale (or elevation scale) is a small, fixed set of box-shadow values — typically 4 to 6 — that a design system reuses everywhere instead of hand-writing a one-off shadow per component. Each step represents a height: a resting card sits low, a dropdown floats higher, a modal higher still. Tokenising them keeps every surface in the UI consistent.
How many elevation levels should I use?
Most production design systems use 4 to 6. Material Design defines 24 but almost no app uses them all. This generator lets you pick 2 to 8; five (xs, sm, md, lg, xl) covers cards, inputs, dropdowns, popovers and modals for the majority of interfaces.
What do "layered" shadows do?
A single box-shadow layer looks flat and slightly fake. Real objects cast light that falls off gradually, so this tool stacks several shadow layers per level — each with a progressively larger offset and blur and a fraction of the total opacity, eased quadratically. The result is the soft, realistic depth you see in polished UI. Turn the toggle off for classic single-layer shadows.
Does it output the official Tailwind CSS shadow values?
Yes. Pick the Tailwind CSS v4 or v3 preset and the tool loads the exact box-shadow strings shipped in Tailwind’s default theme (verified against the Tailwind documentation), so you can drop them into a project or diff them against a customised scale.
What formats can I export?
CSS custom properties (:root { --shadow-md: … }), a Tailwind v4 @theme block, a Tailwind v3 tailwind.config.js boxShadow object, SCSS variables, and a flat JSON token file. Copy the whole set, copy any single level from its preview card, or download it as a file.
Why do my shadows disappear on a dark background?
Shadows work by darkening the surface behind an element, which barely shows against an already-dark background. Use the Dark surface toggle to preview this, then raise the intensity or switch to a near-black shadow colour — dark UIs usually need stronger, tighter shadows than light ones.
Is anything uploaded?
No. The whole tool runs in your browser with no network calls — nothing you enter leaves your device, and it works offline once the page has loaded.
How we compare
| Feature | Online Tool Store | Josh Comeau Shadow Palette | peasydesign Shadow System | talos.tools Box Shadow |
|---|---|---|---|---|
| Generates a full multi-level elevation scale (not a single shadow) | ✓ | ✓ | ✓ | ✗ |
| Adjustable number of levels (2–8) | ✓ | ✗ | ✓ | ✗ |
| Layered "smooth" multi-layer shadows | ✓ | ✓ | ✓ | ✓ |
| Adjustable intensity & softness | ✓ | ✓ | ✓ | ✓ |
| Official Tailwind v3 + v4 values built in | ✓ | ✗ | ✓ | ✗ |
| Export as CSS vars, Tailwind, SCSS and JSON tokens | ✓ | ✗ | ✗ | ✗ |
| One-click light / dark surface preview | ✓ | ✗ | ✗ | ✗ |
| Copy any single level + download the file | ✓ | ✗ | ✗ | ✗ |
| 100% in-browser, no sign-up | ✓ | ✓ | ✓ | ✓ |
The Shadow Palette Generator is excellent for a quick three-step lush shadow; talos.tools is a strong single-shadow builder with Material presets. This tool is aimed at the design-system job: a scale you control the length of, previewed on light and dark, exported straight to CSS variables, Tailwind, SCSS or JSON tokens.