OneFreePlace
Developer Tools · #417
Shadow System Studio

CSS Box Shadow Generator

Build layered shadows, reverse-engineer existing CSS, generate elevation systems from a light model, audit animation/clipping/performance risks, and export production-ready shadow tokens — all locally in your browser.

Multi-shadowExact CSS importElevation physicsState motion auditToken scaleLocal only
Depth without guesswork.Box-shadow preview
1 layerValid CSS

Surface comparison

Shadow anatomy

Quick code

Light model

Direction135°
Elevation8
Softness58%
Ambient54%
This is a design model, not a physical light simulator. It produces a consistent contact + key + ambient stack from one light direction and elevation so shadow systems stay coherent across components.

Generated model preview

Transition-safe state lab

State A

State B

Elevation token scale

Uses the current Light Lab direction, softness, ambient and tint to generate a coherent 0–24 elevation scale instead of unrelated hand-picked shadows.
CSS variables
Tailwind theme
Production CSS
CSS variables
Tailwind
React style
filter: drop-shadow()
Studio JSON

Production shadow recipes

Not vendor presets — editable starting systems.