Tailwind CSS - Box Shadow Color

Tailwind CSS - Box Shadow Color

Tailwind CSS allows you to control the color of a box shadow independently from its size and blur. This is achieved by combining shadow-* utilities (for size) with shadow-{color} utilities.

How It Works

Applying a box shadow is a two-step process:

1. Set the shadow’s properties: Use a class like shadow-md, shadow-lg, or shadow-xl to define the offset, blur, and spread.
2. Set the shadow’s color: Use a class like shadow-cyan-500/50 or shadow-neutral-900 to set the color. The number after the slash indicates opacity.

By default, if you don’t specify a color, Tailwind uses a semi-transparent gray.

Box Shadow Color Classes

Tailwind includes the entire default color palette for shadow colors. The class is constructed as shadow-{color}-{shade}. Here is a small sample:

Class	CSS Properties (Simplified)
shadow-inherit	--tw-shadow-color: inherit;
shadow-current	--tw-shadow-color: currentColor;
shadow-transparent	--tw-shadow-color: transparent;
shadow-blue-500	--tw-shadow-color: #3b82f6;
shadow-red-700/50	--tw-shadow-color: rgb(185 28 28 / 0.5);
shadow-zinc-900	--tw-shadow-color: #18181b;

You can use any color from Tailwind’s extensive color palette. Refer to the official documentation for the full list.

Practical Examples

Example 1: Colored Shadows on Cards

Here, we create cards with soft, colored shadows that match their brand color, creating a more cohesive and visually appealing design.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Box Shadow Color Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-8">

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">

  <!-- Card 1: Blue Shadow -->
  <div class="bg-white p-6 rounded-lg shadow-xl shadow-blue-500/20">
    <h3 class="font-bold text-xl text-blue-800">Blue Theme</h3>
    <p class="text-slate-600 mt-2">This card has a large (`shadow-xl`) blue shadow with 20% opacity (`shadow-blue-500/20`).</p>
  </div>

  <!-- Card 2: Green Shadow -->
  <div class="bg-white p-6 rounded-lg shadow-xl shadow-emerald-500/20">
    <h3 class="font-bold text-xl text-emerald-800">Green Theme</h3>
    <p class="text-slate-600 mt-2">This card uses the same size shadow but with a green hue.</p>
  </div>

  <!-- Card 3: Default Shadow -->
  <div class="bg-white p-6 rounded-lg shadow-xl">
    <h3 class="font-bold text-xl text-slate-800">Default Theme</h3>
    <p class="text-slate-600 mt-2">This card uses the default gray shadow color for comparison.</p>
  </div>

</div>

</body>
</html>

Example 2: Interactive Shadow Color on a Button

We can change the shadow color on user interaction, like hover or focus, to create engaging UI elements. This is great for indicating a button’s state.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Shadow Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">

  <button class="
    bg-violet-600
    text-white
    font-bold
    py-3 px-8
    rounded-lg
    transition-all
    duration-300
    shadow-lg
    shadow-violet-600/30
    hover:bg-violet-700
    hover:shadow-xl
    hover:shadow-violet-600/50
    focus:outline-none
    focus:ring-4
    focus:ring-violet-300
  ">
    Click Me
  </button>

</body>
</html>

Pro Tips

• Opacity is Key: Use opacity modifiers (e.g., /50, /20) to create softer, more subtle shadows. A full-opacity colored shadow can look harsh.
• Arbitrary Colors: Need a very specific color? Use arbitrary values: shadow-[#123456]/40.
• Customization: For project-wide consistency, add your brand’s shadow colors to your tailwind.config.js file under theme.extend.boxShadowColor.