CSS Box Shadow Generator
Build beautiful box shadows visually with multiple layers, then copy the CSS.
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
Frequently Asked Questions
What is a CSS box-shadow?
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets, blur and spread radii, color, and an optional inset keyword.
Can I stack multiple shadows?
Yes! CSS allows comma-separated shadow values. This generator lets you add multiple shadow layers and reorder them. The first shadow in the list renders on top.
What does the spread radius do?
Spread radius expands or contracts the shadow. Positive values make the shadow larger than the element, while negative values shrink it. A spread of 0 keeps the shadow the same size as the element.
What is the difference between inset and outset shadows?
By default shadows render outside the element (outset). Adding the inset keyword makes the shadow appear inside the element, giving an embossed or pressed-in look.