CSS Box Shadow Generator
Create realistic multi-layered depth, natural atmospheric ambient shadows, vibrant colored glows, and inset press effects with complete control over offsets, blur, and spread.
Multi-Layer Box Shadows
/* Box shadow CSS */Curated Box Shadow Presets
Click any preset to apply modern shadow configurations inspired by leading design systems.
How to Master CSS Box Shadows
Understand Coordinates
The X offset moves shadows horizontally; Y offset shifts them vertically. A positive Y value casts a downward shadow under an elevated element.
Layer Multiple Shadows
Realistic UI shadows consist of at least two layers: a sharp contact shadow with low blur close to the object, and a soft ambient shadow with high blur.
Use Negative Spread
Applying negative spread (e.g. -5px) prevents shadows from spilling past side edges, creating modern card elevation without muddy edges.
CSS Box-Shadow Anatomy & Syntax
Multi-Layer Stacking
CSS supports comma-separated shadows. CSSCraft allows adding unlimited independent layers to produce rich, studio-grade depth.
Inset Inner Shadows
Toggle the inset keyword on any layer to cast shadows inside the element frame, perfect for input wells and depressed buttons.
Universal Browser Support
box-shadow is universally supported across 100% of modern web browsers with hardware acceleration.
Frequently Asked Questions
Blur radius determines how soft the shadow edges appear (0px is completely sharp). Spread radius grows or shrinks the overall perimeter of the shadow before blur is applied.
In the real world, light scatters in ambient and directional rays. A single dark shadow appears harsh like an artificial spotlight. Layering two or three soft semi-transparent shadows emulates real physics.