Box Shadow Generator
Create CSS box shadows with visual editor
Preview
Shadow Layers
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
Frequently asked questions
What do the box-shadow values mean?
Box-shadow takes: horizontal offset, vertical offset, blur radius, spread radius, and color. Optional 'inset' creates inner shadows. Example: box-shadow: 4px 4px 8px 0 rgba(0,0,0,0.2).
How many shadow layers should I use?
One layer works for simple shadows. Use 2-3 layers for more realistic depth—a subtle far shadow plus a sharper near shadow mimics natural lighting. Avoid more than 4-5 for performance.
Do box shadows affect layout?
No, box shadows are purely visual and don't affect element dimensions or layout. They can overflow containers, so consider overflow settings on parent elements.