CSS Box Shadow Generator
Stack multiple shadow layers with granular blur, spread, color opacity, and inset controls for smooth, hyper-realistic UI depth.
Shadow Layers (1/5)
Creating Natural UI Shadows
Real light creates a sharp contact shadow right beneath the object and a larger, softer ambient shadow dispersed outward.
Instead of generic pure black (rgba(0,0,0,0.1)), tint your shadow with your page background or primary theme hue for a clean finish.
Keep blur radii proportional to the perceived height (Z-index). Higher cards have wider blur and softer opacities.
Frequently Asked Questions
What is spread radius in CSS box-shadow?
Spread radius expands or shrinks the size of the shadow before blur is applied. A positive value expands the shadow outward, while a negative value shrinks it behind the container.
How can I paste this into Tailwind CSS?
You can copy the generated `box-shadow` value directly into your `tailwind.config.js` under `extend.boxShadow` or use Tailwind's arbitrary value class: `shadow-[...]`.