Tailwind Box Shadow Color

The tailwind box shadow Color utility class allows you to add shadows to elements, enhancing their visual appearance. In addition to the default shadow color, Tailwind provides utility classes to customize the color of the box shadow.

Applying Tailwind Box Shadow Color

To apply a specific color to the box shadow, you can use the shadow-{color} utility class, where {color} represents the desired color. Tailwind CSS provides a range of predefined color options that you can use. Here are some examples:

• shadow-red-500: Applies a red-colored shadow.
• shadow-blue-700: Applies a blue-colored shadow.
• shadow-green-400: Applies a green-colored shadow.
• shadow-gray-600: Applies a gray-colored shadow.

<div class="flex">
  <div class="shadow-md shadow-yellow-500">Item 1</div>
  <div class="shadow-xl shadow-yellow-500">Item 2</div>
  <div class="shadow-2xl shadow-yellow-500">Item 3</div>
</div>

Preview

Default Tailwind Shadow Color

By default, the shadow utility class applies a shadow with a neutral gray color. This is the standard box shadow color in Tailwind CSS.

<div class="shadow">Item 1</div>

Preview

In the above example, the <div> element has the default tailwind box shadow color applied.

Responsive Tailwind Box Shadow Color

You can also apply box shadow color classes responsively at different breakpoints. To use responsive tailwind box shadow color classes, you can append the breakpoint prefix to the utility class. For example, md:shadow-red-500applies a red-colored shadow starting from the medium breakpoint and above.

<div class="shadow-blue-500 md:shadow-red-500">
  <!-- Content here -->
</div>

In the above example, the shadow color applied to the <div>element is blue by default (shadow-blue-500), but starting from the medium breakpoint and above, it changes to red (md:shadow-red-500).

Tailwind Box Shadow Color

Windframe Tailwind blocks

Content