Box Shadow vs Drop Shadow in TailwindCSS

In CSS, you might be confused with box-shadow and drop-shadow. Both of these properties are quite similar, however, there are some differences between them. In this guide, you’ll know the difference between both, box-shadow and drop-shadow with TailwindCSS examples.

Box Shadow in CSS

• box-shadow is a CSS property that adds a shadow to the entire box of an element, including any content or padding inside it.
• It allows control over the size, position, and color of the shadow.
• It is mainly used to add depth and dimension to a box or to create a visual separation between elements. For example buttons, cards etc.

Here is an example of box-shadow in TailwindCSS. You can check the working example of Tailwind playground.

Here is the output of the above code.

Drop Shadow in CSS

• Drop shadow is also a CSS property that adds a shadow to the outside of an element, typically beneath it.
• It is limited to the outline of an element and does not include any content or padding inside it.
• It is helpful to create the illusion of a light source shining on the element, causing it to cast a shadow. Drop shadow works best with images.

Here is a simple example of using drop-shadow in TailwindCSS. TailwindCSS provides default classes for drop-shadow but you can also use arbitrary values if you want a different effect. Here is a simple example of adding a drop shadow to an image with a default class and with an arbitrary value. Please check the working demo on TailwindCSS playground.

The output of the above example will look like this:

Conclusion

In summary, both the box-shadow and drop-shadow adds a shadow to the elements. The box-shadow affects the entire box of an element while drop-shadow only affects the outline, and they are used for different visual effects.