CSS Box Shadow Generator
Create CSS box-shadow with real-time preview.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);What is box-shadow in CSS?
The CSS box-shadow property allows you to add shadows to any HTML element. It is one of the most used tools in web design for creating depth, elevation, and visual hierarchy. Well-applied shadows make elements appear to "float" above the page.
The syntax includes: horizontal offset (X), vertical offset (Y), blur radius, spread radius, color, and optionally "inset" for inner shadows. You can combine multiple shadows by separating them with commas.
Frequently asked questions
What is the inset property?
Inset converts the outer shadow into an inner shadow. It is useful for creating depth effects, sunken text fields, or pressed buttons.
Do shadows affect performance?
Simple shadows have minimal impact. However, shadows with very high blur on many elements can affect performance on slow devices. Use them sparingly.
Can I use multiple shadows?
Yes, separate them with commas: box-shadow: 2px 2px 5px rgba(0,0,0,0.1), 0 0 20px rgba(0,0,0,0.05). This creates more realistic and sophisticated effects.
Want to learn more? Read our complete guide →