What is CSS box-shadow?

CSS box-shadow is a property that adds shadow effects around an element's frame. You can set multiple effects separated by commas with values for offset, blur, spread, and color.

Can I add multiple shadows to one element?

Yes! CSS allows multiple box shadows on a single element. Our generator supports adding multiple shadow layers that combine for complex effects.

What is an inset shadow?

An inset shadow appears inside the element instead of outside, creating an effect like the content is pressed into the page.

Can I use this generator with Tailwind CSS?

Yes! Our generator supports Tailwind 4 output. Simply select "Tailwind 4" from the output format dropdown to get an arbitrary shadow class that you can use directly in your Tailwind project.

CSS Box Shadow Generator - Free Online Tool for Perfect Shadows

CSS Code

Vendor Prefixes

-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);

CSS Box Shadow Generator - Create Custom CSS Shadows

CSS Code