Tailwind CSS Shadows

Shadows are key elements for creating interface depth and hierarchy. They make elements appear to float above the page, thus attracting user attention. Tailwind provides a carefully designed set of box-shadow utility classes.

Box Shadow

Use shadow-{size} utility classes to add box shadows to elements.

Tailwind's shadow scale is carefully designed, from small to large, with clear hierarchy:

• shadow-sm: Small shadow, very subtle.
• shadow: Standard shadow, most commonly used.
• shadow-md: Medium shadow.
• shadow-lg: Large shadow.
• shadow-xl: Extra large shadow.
• shadow-2xl: Extra extra large shadow, used for very prominent elements.
• shadow-inner: Inset shadow, making the element appear sunken.
• shadow-none: Remove shadow.

<button class="bg-white shadow-md hover:shadow-lg p-4 rounded-lg">
  A button with shadow
</button>

<div class="bg-gray-100 shadow-inner p-4 rounded-lg">
  An area with inset shadow
</div>

Typically, shadow effects are combined with interactive states (like hover), changing shadow size when users interact with elements to provide visual feedback.

Shadow Color

Starting from Tailwind CSS v3.0, you can use shadow-{color} utility classes to change the shadow color. This greatly increases design flexibility, allowing you to create colored shadows that match your brand style.

<button class="shadow-lg shadow-cyan-500/50 ...">
  A blue glow button
</button>

In this example:

• shadow-lg: Apply the large shadow configuration.
• shadow-cyan-500/50: Set the shadow color to cyan-500 with 50% opacity. Using slash syntax (/) to set opacity is very convenient.

You can use any color (including colors you define yourself in tailwind.config.js) as shadow colors.

Drop Shadow

In addition to box-shadow, Tailwind also provides a drop-shadow filter utility. Unlike box-shadow, drop-shadow creates shadows based on the actual shape of the element's content (including transparent parts), while box-shadow creates shadows based on the element's box model.

This is very useful when you need to add shadows to irregularly shaped PNG images or SVG icons.

drop-shadow shares the same scale as box-shadow.

• drop-shadow-sm
• drop-shadow-lg
• drop-shadow-2xl

<!-- This shadow will closely follow the logo's shape -->
<img src="logo.svg" class="drop-shadow-lg">

<!-- This shadow will only be the image's rectangular border -->
<img src="logo.svg" class="shadow-lg">

By skillfully using these shadow tools, you can greatly enhance the texture and visual hierarchy of your interface.