CSS Box Shadow Generator
Build box shadows visually and copy the CSS code.
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.5);
About This CSS Box Shadow Generator
This free box shadow generator lets you build CSS box shadows visually with real-time preview. Adjust horizontal and vertical offsets, blur radius, spread radius, color, opacity, and inset mode. Stack multiple shadow layers for more complex effects, then copy the ready-to-use CSS code.
How to Use
- Adjust the sliders to set horizontal offset, vertical offset, blur radius, and spread radius.
- Pick a shadow color and set the opacity level.
- Toggle "Inset Shadow" for an inner shadow effect.
- Add additional shadow layers with the "+ Add Shadow" button and configure each independently.
- Copy the generated CSS code with the "Copy CSS" button.
Frequently Asked Questions
What is the box-shadow CSS property?
The box-shadowproperty adds shadow effects around an element's frame. You can set multiple shadows separated by commas, and control the offset, blur, spread, color, and whether the shadow is inset or outset.
Can I use multiple box shadows on one element?
Yes. CSS allows comma-separated box shadow values on a single element. This generator supports adding and removing multiple shadow layers that are combined in the output CSS.
What is the difference between blur and spread?
Blur radius controls how blurred the shadow is — higher values produce a softer, more diffuse shadow. Spread radius controls the size of the shadow — positive values make it larger than the element, and negative values make it smaller.
What does "inset" mean for a box shadow?
Adding the inset keyword changes the shadow from an outer shadow (drop shadow) to an inner shadow, making it appear as though the content is pressed into the page. This is commonly used for input fields and pressed button states.
Do box shadows affect layout or performance?
Box shadows are purely visual and do not affect layout or element sizing. However, complex or very large shadows can impact rendering performance, especially on lower-powered devices. Keep blur and spread values reasonable for best performance.