Tailwind CSS - Box Shadow

Modern Tailwind CSS: Depth and Elevation with Box Shadow

Box shadow utilities are essential for creating depth, hierarchy, and visual separation in a user interface. Tailwind CSS provides a beautiful, pre-configured set of shadow-* utilities that allow you to add subtle or dramatic elevation to your elements with ease.

Box Shadow Utilities

Tailwind’s default shadow palette is designed to work well together, providing a consistent scale of elevation.

Class	Description
shadow-sm	A very subtle shadow, good for small elements or slight lifts.
shadow	The standard, all-purpose shadow.
shadow-md	A medium shadow for slightly more emphasis.
shadow-lg	A large shadow, ideal for cards or interactive elements on hover.
shadow-xl	An extra-large shadow, often used for modals, dropdowns, or popovers.
shadow-2xl	The largest shadow, creating maximum separation from the page.
shadow-inner	An inset shadow, useful for pressed-in states or form inputs.
shadow-none	Removes any existing box shadow.

Modern Feature: Colored Shadows

A powerful feature in modern Tailwind is the ability to easily color your shadows. By default, shadows use a semi-transparent black. You can override this by adding a shadow color utility from your theme’s color palette. The syntax is shadow-{color}-{shade}.

<!-- A standard large shadow -->
<div class="shadow-lg">...</div>

<!-- A large shadow with a blue tint -->
<div class="shadow-lg shadow-blue-500/50">...</div>

<!-- A subtle inner shadow with a red tint for a warning input -->
<input class="shadow-inner shadow-red-500/30" />

Practical Examples

To follow these examples, ensure you have a modern Tailwind CSS project set up.

Example 1: Interactive Card with Hover Effect

A classic UI pattern is to “lift” a card on hover to indicate it’s interactive. We can achieve this by applying a larger shadow on the hover state and adding a transition to make it smooth.

<link href="/dist/output.css" rel="stylesheet">

<body class="bg-slate-100 grid place-items-center h-screen">
  <div
    class="
      bg-white p-6 rounded-xl shadow-md
      hover:shadow-xl hover:-translate-y-1
      transition-all duration-300 cursor-pointer
    ">
    <h3 class="text-xl font-bold text-gray-900">Learn Tailwind CSS</h3>
    <p class="mt-2 text-gray-600">The best way to style modern websites.</p>
  </div>
</body>

Example 2: Styled Button with Colored Shadow

Colored shadows can create a beautiful “glow” effect that reinforces your brand’s color palette. Here, we add a blue shadow to a primary action button.

<link href="/dist/output.css" rel="stylesheet">

<body class="bg-gray-900 grid place-items-center h-screen">
  <button
    class="
      bg-blue-600 text-white font-bold py-3 px-6 rounded-lg
      shadow-lg shadow-blue-600/50
      hover:bg-blue-700
      transition-colors
    ">
    Get Started
  </button>
</body>

Best Practices and Performance

• Hierarchy: Use shadow intensity to communicate importance. Modals (shadow-xl) should appear above cards (shadow-lg), which appear above the page background.
• Consistency: Stick to the predefined shadow scale as much as possible to maintain a consistent visual language.
• Performance: Animating box shadows can be computationally expensive for browsers. For hover effects, prefer animating transform and opacity where possible. The transition-shadow utility works well, but avoid applying it to many elements at once on a complex page.
• Customization: If the default shadows don’t fit your design system, you can easily extend them in your tailwind.config.js file.