CSS Box Shadow Generator
Build CSS box shadows visually with multiple layers and live preview.
Processed on your device — never uploaded
Layer 1
box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.2);
Frequently Asked Questions
What is the CSS box-shadow property?
The box-shadow property adds shadow effects around an element's frame, defined by horizontal and vertical offsets, blur radius, spread radius, and color.
Can I add multiple box shadows to one element?
Yes, CSS supports multiple comma-separated box-shadow values on a single element. This generator lets you add and configure multiple shadow layers.
What does the inset keyword do in box-shadow?
The inset keyword changes the shadow from an outer shadow (outset) to an inner shadow, making it appear inside the element's border.
What is the spread value in box-shadow?
The spread value controls the size of the shadow. Positive values make the shadow larger than the element, while negative values shrink it.