Box Shadow Generator
Create CSS box shadows visually. Adjust offset, blur, spread, color, and opacity. Copy the CSS instantly.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.25);About
The box-shadow CSS property adds one or more shadows to an element. Unlike drop-shadow filters, box-shadow follows the rectangular shape of the element (respecting border-radius). Shadows are defined by horizontal offset, vertical offset, blur radius, spread radius, and color. The blur radius softens the shadow edge — higher values create a more diffuse shadow. The spread radius expands or contracts the shadow area. Combining multiple shadows with different settings creates depth effects that bring interfaces to life.
FAQ
What is the difference between box-shadow and drop-shadow?
box-shadow applies to the element's box (rectangular shape, respects border-radius). CSS filter: drop-shadow() follows the actual shape of the content, including transparent areas in images. For most UI elements, box-shadow is preferred.
Can I use multiple box shadows?
Yes. Separate multiple shadows with commas. The first shadow in the list appears on top. This allows layering a tight, dark shadow with a wider, lighter one for realistic depth.