CSS Box Shadow Generator
Create beautiful box shadows with live preview. Multiple layers, presets, and CSS/Tailwind output.
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
shadow-[0px_4px_12px_0px_rgba(0,_0,_0,_0.15)]
What is CSS Box Shadow?
CSS box-shadow adds shadow effects around an element's frame. Shadows are defined by horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be layered for more realistic effects. This generator provides visual controls for all parameters, supports multiple shadow layers, and outputs both CSS and Tailwind shadow classes.
Common Use Cases
- •Creating elevation effects for cards and modals
- •Designing subtle depth cues for UI components
- •Building neumorphism and glassmorphism effects
- •Generating multi-layer shadows for realistic depth
- •Converting shadow designs to Tailwind CSS classes
Frequently Asked Questions
What is the difference between box-shadow and drop-shadow?
box-shadow applies to the element's rectangular box. filter: drop-shadow() follows the element's actual shape including transparent areas. Use drop-shadow for non-rectangular elements like images with transparency or CSS clip-path shapes.
How many shadows can I stack?
There's no limit. Multiple shadows are comma-separated and rendered in order (first shadow on top). Common patterns use 2-3 layers: a tight, dark shadow for definition and a larger, lighter shadow for ambient depth.