Overview
What this tool does
Box-shadow adds depth to flat HTML elements. This generator stacks up to five shadow layers per element so you can build subtle card lifts, sharp drop shadows, glow effects, neumorphism, and inner shadows. Each layer has its own X/Y offset, blur radius, spread, color, opacity, and optional inset. Six preset starters get you to a polished result in one click; copy the result as raw CSS or a Tailwind arbitrary-value class. 100% client-side, no signup.
How to
Use it in 3 steps
- Click a preset (Soft card, Sharp, Lift, Glow, Neumorphism, Inset) to start from a polished baseline.
- Tweak each layer: drag X and Y offset to move the shadow, blur to soften it, spread to thicken it, color and opacity to tune the depth.
- Toggle 'Inset' on a layer to make it an inner shadow (useful for pressed-button or carved-in looks).
- Click 'Add layer' to stack more shadows. Real cards usually use 2-3 layers (a tight sharp one + a soft far one).
- Change the preview background color to test how your shadow looks on light vs dark surfaces.
- Copy the CSS or Tailwind class from the bottom of the page.
FAQ
Frequently asked questions
▶Why use multiple shadow layers?
Real-world shadows have multiple light sources and varying densities. A single big blurry shadow looks fake; a tight close shadow plus a soft far shadow feels grounded. Most polished UI shadows use 2-3 layers stacked.
▶What does 'spread' do?
Spread expands or shrinks the shadow by a fixed number of pixels before the blur is applied. Negative spread tightens the shadow so it sits closer to the element (useful for high-quality card shadows that don't extend too far).
▶When should I use 'inset'?
Inset shadows render INSIDE the element instead of outside. Common uses: pressed-button states, sunken input fields, carved or embossed effects, and to add subtle depth to colored backgrounds.
▶Why is neumorphism two layers, one dark and one light?
Neumorphism mimics the look of a soft surface gently raised or pressed; the dark layer is the cast shadow, the light layer is the highlight from a top-left light source. Both are needed for the effect.
▶What's the Tailwind arbitrary-value class?
Tailwind supports `shadow-[X_Y_blur_spread_color]` for any CSS value. Underscores replace spaces inside the brackets, commas separate stacked layers. Drop the class straight into a className.