Layered inset shadow
Colored primary button with layered inset edge highlights and soft outer shadow stack using Tailwind arbitrary shadow values and framer-motion spring tap.
Dependencies
Install the required packages before using this component.
Notes
The top inset layer (0 1px 0 0) is the load-bearing highlight. It simulates a light source from above and is visible even at small sizes. The side inset layers (1px 0 0 0) reinforce the 3D rim illusion.
Diffused inner layers (4px through 8px) spread the glow inward without hard edges. Each pair uses matching positive and negative offsets so the inner glow stays centered and symmetric.
The outer shadow uses 4 layers with decreasing opacity. A single blurred shadow looks printed; stacked layers with opacity falloff look natural and volumetric.