About

Shadows are not just decoration; they are the z-index of the visual world. In UI design, accurate shadows define hierarchy, affordance (clickability), and spatial relationships. Most generators create flat, lifeless shadows using a single layer. This tool utilizes Layered Interpolation to simulate real-world lighting physics, where light diffusion creates both a sharp umbra and a soft penumbra. It is designed for frontend developers who need production-ready CSS or Tailwind code without the guesswork.

We solve the "Floaty Effect" problem - where elements look like they are hovering unnaturally - by allowing precise control over ambient occlusion (the contact shadow) and direct light. Whether you need the soft extrusion of Neumorphism or the crisp stack of Material Design, this engine calculates the trigonometric offsets for you.

Formulas

The core of realistic lighting lies in the relationship between the Light Source Angle (θ) and the shadow offset. We calculate the Cartesian coordinates for every layer i:

{

x_i = distance_i × cos(θ)y_i = distance_i × sin(θ)

For Neumorphism, the highlight layer acts as a reflection, calculated by rotating the angle by 180° (π radians). The intensity of the shadow (α) typically follows an inverse-square law relative to the blur radius (σ).

Reference Data

Shadow Type	Layers	Physics Principle	Best Application	Ref (opacity)
Material Level 1	2	Ambient + Key Light	Cards, List Items	0.12
Material Level 5	3	High Diffusion	Modals, Dialogs	0.30
Neumorphism	2	Extrusion (Light/Dark)	Soft UI Buttons	Mixed
Smooth Shadow	5-6	Gaussian Decay	Hero Sections	0.05 avg
Inner Shadow	1-2	Recession/Depth	Inputs, Checkboxes	0.15
Glow/Neon	3+	Light Scattering	Dark Mode Accents	0.80
Solid/Retro	1	No Diffusion	Brutalist Design	1.00
Contact Shadow	1	Occlusion	Floating Objects	0.60

Frequently Asked Questions

A single shadow looks artificial because real light sources cast complex shadows. By stacking multiple shadows - for example, one tight/dark shadow for the "contact" point and one large/light shadow for "atmosphere" - developers achieve a "smooth" look that blends seamlessly into the background. This technique is standard in design systems like Tailwind and Stripe.

The dial represents a global light source (like the sun). When you rotate it, the tool uses trigonometry to recalculate the X and Y offsets of every active shadow layer simultaneously. This ensures that if you have 5 layers, they all react to the light direction coherently, maintaining the illusion of a single physical object.

Box-shadows, especially with large blur radii, can be expensive for the browser to paint. However, modern browsers (Chrome, Safari, Firefox) optimize this heavily. To ensure 60fps animations, avoid animating the `blur` or `spread` radius. Instead, animate the `opacity` or the `transform` of the element.

Yes. The tool includes a toggle to generate `shadow-[...]` arbitrary value strings for Tailwind JIT (Just-In-Time) mode. This allows you to paste the complex shadow logic directly into your HTML classes without writing custom CSS files.

Outset shadows (default) make an element appear to float *above* the page. Inset shadows make the element appear to be cut *into* the page. Inset is crucial for form inputs, pressed buttons, and wells.