Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Using Tailwind Shadow: An Easy Guide to Custom Shadows

Box shadows are an essential part of web design. They can be used to add depth, dimension, and realism to your elements and also to create visual interest in your designs. However, not every great framework out there allows you to manipulate the shadows into whatever you want, like Tailwind CSS.

Tailwind CSS, a utility-first CSS framework that provides a set of low-level CSS utility classes, makes it easy to apply box shadows to your elements, with a variety of default (preset) shadow values and the flexibility to create custom shadows, combine both, or even apply multiple shadows to a single element.

In this article, we will explore how to use Tailwind to apply box shadows to your elements.

Before delving into the world of shadows 😎, if you want to skip the hard part of developing your web components and save time, consider choosing from our repository or 10,000+ AI-generated custom components to speed up development with Tailwind.

Tailwind logo

Prerequisites

Before you can use box shadows with Tailwind, it is important to have a basic understanding of how CSS box shadows work. You can find a comprehensive overview of CSS box shadows on the MDN website.

Once you have a basic understanding of CSS box shadows, you are ready to start using them with Tailwind. In any case, PureCode’s AI can still help you with the shadows in your design. All you have to do is to choose from over 10,000 AI-generated custom components.

Using Preset Tailwind Shadows

Tailwind CSS provides six default box-shadow utilities, one shadow inner utility, and a utility for removing existing shadows. You can apply these utilities using Tailwind classes.

The following table lists the preset shadow utilities and their corresponding Properties:

To apply a preset shadow to an element, simply add the corresponding shadow utility class to the element’s class attribute. For example, to apply a shadow utility to a div element, you would use the following markup:

<div class="shadow">
  This element has a default shadow.
</div>
Default Shadow

You can also apply preset shadows to responsive elements using Tailwind CSS’s responsive variants. For example, to apply a shadow-md utility to a div element on desktop and tablet devices, you would use the following markup:

<div class="shadow-md md:shadow-none">
 This element has a `shadow-md` utility on desktop and tablet devices, but no shadow on mobile devices.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Shadow Responsive

Adding Custom Shadows

To add custom shadows to your Tailwind project, you will need to modify the tailwind.config.js located in the root directory of your project. To understand better how to do this, you can look at how to customize the Tailwind theme. The links below provide helpful resources:

Once you have opened the tailwind.config.js file, locate the theme object. This object contains all of the Tailwind theme variables, including those for box shadows.

To add a custom shadow, simply add a new key to the theme.boxShadow object. The key should be a string that represents the name of your shadow.

The box-shadow property takes several values in a specific order. Here is the order of properties to style a shadow:

  1. The offset on the x-axis

  2. The offset on the y-axis

  3. A blur radius

  4. A spread radius

  5. A color

Once you have added your custom shadow, save the tailwind.config.js file.

To apply your custom shadow, simply add the corresponding Tailwind class to the element that you want to shadow. For example, to apply the custom shadow that you defined as my-shadow, you would add the shadow-my-shadow class to the element.

Here is an example of how to add a custom shadow to a Tailwind project:

// tailwind.config.js
module.exports = {
  theme: {
    boxShadow: {
      custom-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)',
    },
  },
};

<div class="shadow-custom-shadow">
  This element has a custom shadow.
</div>
Custom Shadow

You can also apply multiple shadows to an element by separating the shadow definitions with spaces. For example, to apply two shadows to an element, you would use the following code:

module.exports = {
  theme: {
    boxShadow: {
      custom-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)',
      other-shadow: '-2px -4px 8px 0 rgba(40, 111, 22, 0.5)',
    },
  },
};
<div class="shadow-myShadow shadow-myOtherShadow">
  This element has two shadows.
</div>
Two Custom Shadows

Using Arbitrary Value

Tailwind allows you to use arbitrary values for shadows, which means you can define your custom shadows without having to modify your Tailwind CSS config file. This is useful if you need to use a one-off shadow value that does not make sense to include in your theme, or if you need to create a shadow that is more complex than what is provided by the preset Tailwind CSS shadows.

To use arbitrary values for shadows, simply enclose the shadow values in square brackets. For example, the following class would apply a box shadow with an offset of 10px in both the horizontal and vertical directions, a blur radius of 5px, a spread radius of 2px, and a color of rgba(0,0,0,0.3) :

<div class="shadow-[10px_10px_5px_2px_rgba(0,0,0,0.3)]">This element uses arbitrary values for its shadows</div>

Arbitrary Values in Shadow

You can also use arbitrary values for the shadow color. To do this, you need to use a color syntax like hex, rgb hsl, etc. For example, using the rgba, write the values of red, green, and blue with commas separating the red, green, and blue values. the following class would apply a box shadow with a color of rgba(0,0,0,0.3):

<div class="shadow-md shadow-[#ff3233]">This element uses arbitrary color for its shadow</div>
Arbitrary Color

Here are some practical examples of using arbitrary values for box shadows:

<p class="shadow-[10px_5px_2px]">This element uses arbitrary values</p>
<p class="shadow-[10px_5px_2px_#50d71e]">This element uses arbitrary values</p>

For the shadow color: In the original shadow, we used the modern RGB syntax, which has no commas. But that syntax does not work yet on arbitrary values, we need to switch back to the old syntax that uses commas and remove any spaces between the numbers.

I recommend checking out the arbitrary values documentation if you want to learn more about arbitrary value support.

Using Multiple Shadows with Arbitrary Values

To use multiple shadows with custom values in Tailwind, simply separate the shadow definitions with commas. For example, the following class applies two shadows to an element:

<p class="shadow-[-5px_-6px_5px_rgba(121,22,87,0.3),4px_10px_15px_#9966ff]">
  Two Shadows on Arbitrary Values
  </p>

Arbitrary Values

The first shadow has a -5px horizontal offset, a -6px vertical offset, a 5px blur radius, and a 30% opacity. The second shadow has a 4px horizontal offset, a 10px vertical offset, a 15px blur radius, and a 0% opacity.

You can use as many shadows as you like, and you can mix and match arbitrary values with any of the preset Tailwind CSS shadow values.

Here is an example of using three shadows with arbitrary values:

<div class="w-80 m-auto mt-12 p-4 bg-slate-50  shadow-[-5px_-6px_5px_rgba(121,22,87,0.3),4px_10px_15px_#9966ff,0px_0px_5px_0px_rgba(0,0,0,0.1)]">
Three Shadows on Arbitrary Values
</div>

The first two shadows are the same as in the previous example. The third shadow has no horizontal or vertical offset, but it has a 5px blur radius and a 10% opacity. This creates a subtle inset box shadow effect.

You can use arbitrary values to create any kind of shadow effect you like. Be creative and experiment!

Adding Text Shadow Classes to Tailwind

In your tailwind.config.js add the following:

const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    extend: {
      textShadow: {
        sm: '0 1px 2px var(--tw-shadow-color)',
        DEFAULT: '0 2px 4px var(--tw-shadow-color)',
        lg: '0 8px 16px var(--tw-shadow-color)',
      },
    },
  },
  plugins: [
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'text-shadow': (value) => ({
            textShadow: value,
          }),
        },
        { values: theme('textShadow') }
      )
    }),
  ],
}

This is how to add text-shadow to texts in Tailwind.

You can also write text-shadow shadow-indigo-800 and have a beautiful indigo text-shadow appear, fully created with Tailwind and zero additional CSS.

For an even more in-depth explanation of how text-shadow works with Tailwind, I recommend that you check out the adding plugins documentation from Tailwind documentation.

<ul class="space-y-8 text-lg font-bold text-gray-900 dark:text-white">
  <li class="text-shadow-sm shadow-indigo-500/50">Text Shadow: Small</li>

  <li class="text-shadow shadow-indigo-500/50">Text Shadow: Default</li>

  <li class="text-shadow-lg shadow-indigo-500/50">Text Shadow: Large</li>

  <li class="text-shadow-[0_4px_8px_#6366f1]">
    Text Shadow: Arbitrary (Custom Color)
  </li>

  <li
    class="text-shadow-[0_4px_8px_var(--tw-shadow-color)] shadow-indigo-500/50"
  >
    Text Shadow: Arbitrary (Tailwind Color)
  </li>
</ul>

In the example code above ⬆, we added the following Tailwind classes:

  • text-shadow

  • text-shadow-sm

  • text-shadow-lg

📝 Note: You can add as many Text shadow classes as you like.

text shadows
Text shadows

How to Apply Drop-Down Shadows to Images

There are just a couple of ways to apply drop shadows to images in Tailwind. These include using drop shadows.

Tailwind Shadow for PNG Images

In this section, we will explore the process of applying drop shadows specifically to PNG images using Tailwind.

To apply drop shadows to PNG images using Tailwind, you can utilize the built-in classes provided by the framework. These classes are specifically designed to make the process easier and more efficient.

You can use the shadow class followed by the desired shadow intensity. For example, to apply a subtle shadow, you can use the class shadow-sm, while for a more pronounced shadow, you can use shadow-lg. Here is an example:

<img src="https://i.ibb.co/02rf3Qb/tailwindcss-logo-icon-170649.png" alt="Example Image" class="shadow-lg">

ImageShadow

In the above example, the shadow-lg class is applied to the image, resulting in a larger and more noticeable drop shadow.

You can also use Tailwind CSS to customize the color and blur of your shadow. For example, to apply a blue shadow with a blur of 5px, you would use the following CSS:

module.exports = {
  theme: {
    extend: {
      dropShadow: {
        'blue': '10px 12px 5px 0px rgba(23, 67, 88, 0.9)',
      }
    }
  }
}

<img src="https://i.ibb.co/1M6xG2f/image.png" class="drop-shadow-lg drop-shadow-blue">

Image Drop Down Shadow Arbitrary Values

Tailwind Box Shadow

To apply a box shadow to a PNG image in Tailwind CSS, you can use the box-shadow-{amount} utility class. This class will add a shadow to the image box, which may not extend beyond the edges of the image itself. You can choose from one of the following variants:

  • shadow-sm

  • shadow

  • shadow-md

  • shadow-lg

  • shadow-xl

  • shadow-2xl

For example, to apply a large box shadow to an image, you would use the shadow-lg class.

<img src="<https://i.ibb.co/1M6xG2f/image.png>" class="shadow-lg">

Image Box Shadow

You can also use Tailwind CSS to customize the color, blur, spread, and offset of your box shadow. For example, to apply a black box shadow with a blur of 5px, spread of 2px, and offset of 10px, you would use the following CSS:

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'black': '10px 10px 5px 2px rgba(0, 0, 0, 0.0)',
      }
    }
  }
}
<img src="/image.png" class="shadow-lg shadow-black">

Differentiating Between Drop Shadows and Box Shadows

It is important to note the distinction between drop shadows and box shadows. Drop shadows are specifically designed to create the illusion of an object casting a shadow on the surface below it, while box shadows are more versatile and can be applied to any element on a webpage.

Drop shadows and box shadows are similar, but there are a few key differences.

  • Drop shadows are always offset from the element they are applied to, while box shadows can be either offset or inset.

  • Drop shadows are typically used to give elements a more three-dimensional appearance, while box shadows are often used to highlight or emphasize elements.

  • Drop shadows are only visible on elements with transparent backgrounds, while box shadows are visible on elements with any background color.

Custom CSS for Advanced Effects

If you need to create more advanced shadow effects, you can use custom CSS. For example, you could use the box-shadow property to specify a custom offset, spread, and blur radius for the shadow. You could also use multiple box-shadow properties to create multiple shadows.

For example, the following CSS would create a drop shadow with a custom offset and spread:

.my-image {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
}

Compatibility with Tailwind CSS V2

With the latest version of Tailwind CSS, you now have more control over configuring preset drop shadow styles while retaining the simplicity of utility classes. Previously, drop shadow values were hard-coded, limiting your ability to customize shadows globally.

Tailwind CSS’s v2 introduced changes that empowered users to modify base shadows through the tailwind.config.js file. Specifically, preset box and drop shadow settings have moved into the theme.boxShadow and theme.boxShadowColor configuration objects. By editing properties like x/y offset, blur radius, spread, and color in these objects, you can tweak the built-in shadow presets to match your design system.

Importantly, handy drop-shadow-{amount} utility classes like drop-shadow-md remain functional. When you change the defaults in the theme configuration, it will automatically apply to these utilities. This means you can still use utilities for rapid development alongside configurable defaults.

You also gain the ability to use the CSS drop-shadow property directly within Tailwind CSS for precise control. By customizing each aspect of the shadow render, such as offsets, blur, spread distance, and color stops, you can achieve entirely custom shadows without touching Sass/PostCSS.

Next Steps

Tailwind CSS provides a powerful and flexible framework for using box shadows in your projects. With a basic understanding of CSS box shadows and the Tailwind CSS documentation, you can start using default shadows, custom shadows, and arbitrary values to create a variety of effects.

Here are some next steps to consider:

  • Experiment with different shadiness values and combinations. Try using different shadiness sizes, offsets, and colors to see how they affect your designs.

  • Use shadows to create depth and hierarchy. Shadows can be used to make elements appear more elevated or recessed and to draw attention to important elements.

  • Use shadows to create visual interest. Shadows can be used to add subtle details and flourishes to your designs.

  • Use shadows to enhance your brand identity. Shadows can be used to create a consistent look and feel for your products and services.

If you are new to Tailwind CSS, I recommend that you check out the documentation and tutorials to learn more about how to use it. And if you have any questions, do not hesitate to reach out to the Tailwind CSS community.

In any case, PureCode’s AI can still help you with the shadows in your design. All you have to do is to choose from PureCode’s large database of custom AI-generated components.

Happy designing 💻!

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.