Tailwind CSS - Box Shadow

Previous
Quiz
Next

Tailwind CSS Box Shadow is a utility class that provides an effective way of controlling the box shadow of an element.

Tailwind CSS Box Shadow Classes

The following is the list of Tailwind CSS Box Shadow classes that provide an effective way of handling box shadows of HTML elements.

Class CSS Properties
shadow-sm box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadow box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-md box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lg box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xl box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xl box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-inner box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-none box-shadow: 0 0 #0000;

Functionality of Tailwind CSS Box Shadow Classes

  • shadow-sm: This class is used to create a lighter or faded shadow on the outer side of the box.
  • shadow: This class is used to create regular shadows on the outer side of the box.
  • shadow-md: This class is used to create medium shadow on the outer side of the box.
  • shadow-lg: This class is used to create a large shadow on the outer side of the box.
  • shadow-xl: This class is used to create an extra large shadow on the outer side of the box.
  • shadow-2xl: This class is used to create the deepest shadow on the outer side of the box.
  • shadow-inner: This class is used to create the shadow inner side of the box.
  • shadow-none: This class is used to dilute the shadow effect.

Tailwind CSS Box Shadow Class Examples

The following examples will illustrate the Tailwind CSS Box Shadow class utility.

Adding Outer Shadow

To create a box shadow on the outer part of any element, we can use 'shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-xl', or 'shadow-2xl' utilities to apply different sized outer box shadows to an element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Box Shadow Class
    </h2>
    <p>Shadow Effect are Increasing on Each Div</p>
    <div class="flex">
        <div class="shadow-sm w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow-sm 
        </div> 
        <div class="shadow w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow 
        </div> 
        <div class="shadow-md w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow-md 
        </div> 
        <div class="shadow-lg w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow-lg 
        </div> 
        <div class="shadow-xl w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow-xl 
        </div> 
        <div class="shadow-2xl w-24 h-24 bg-green-400 
                    m-2 text-center">
            shadow-2xl 
        </div> 
    </div>
</body>

</html>

Adding Inner Shadow

To create a box shadow on the inner part of any element, we can use 'shadow-inner' class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Box Shadow Class
    </h2>
    <p>Outer Shadow</p>
    <div class="shadow-lg w-24 h-24 bg-green-400 
                m-2 text-center">
        shadow-sm 
    </div>
    <div class="shadow-inner w-24 h-24 bg-green-400 
                m-2 text-center">
        shadow-sm 
    </div> 
</body>

</html>

Adding Shadow on Hover

We can highlight through shadow on any element by activating shadow class on hover.

Example

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Box Shadow Class
    </h2>
    <div class="hover:shadow-2xl w-24 h-24 bg-green-400 
                    m-2 text-center">
            Hover On
    </div>
</body>

</html>
Print Page
Previous
Next