Tailwind CSS Box Shadow Color

The tailwind box shadow 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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.