Beautiful Depth.
Mathematical Precision.
Standard CSS shadows look flat. Elite UIs rely on stacked, multi-layer drop shadows to mimic the physical dispersion of light. Build perfect, glassmorphic elevation with zero CSS headaches.
Multi-Layer Stacking
Generates up to 10 unique, perfectly stepped CSS shadows chained together to create ultra-realistic visual depth.
Parabolic Easing
Uses mathematical ease-in and ease-out formulas to interpolate the spread and blur radii, mimicking how photons actually scatter.
Tailwind v4 Ready
Instantly exports your stacked shadow configuration as an inline CSS string or a raw Tailwind theme configuration variable.
Under the Hood
The architecture powering Lumist Shade.
Inverse Square Light Law
By default, a standard box shadow drops off linearly. Lumist Shade utilizes `ease-out` math to mimic inverse-square light dispersion, creating a tight umbra and a vast, soft penumbra.
Zero-Dependency Output
The exported code relies purely on vanilla CSS standards. There are no proprietary wrappers or massive utility libraries required—just drop it into your CSS module.
Frequently Asked Questions
Why not just use Tailwind's default shadow-xl?
Tailwind's defaults are great, but they are generic. If you are building a premium glassmorphic interface, a custom dashboard, or a highly specific brand identity, controlling the exact color, dispersion, and layering of your elevation is required.
Can I apply colored shadows?
Yes. You can supply any Hex code to generate rich, atmospheric colored glows instead of standard black/gray drop shadows.