Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Box Shadow

  • Last Updated : 04 Mar, 2021

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. By using this class we can control the box-shadow of an element. In CSS, we do that by using the CSS Shadow Effect properties of box-shadow. 

Box Shadow classes:

  • shadow-sm: This class is used to create a faded or small shadow effects on the box.
  • shadow: This class is used to create normal shadow effects on the box.
  • shadow-md: This class is used to create md effects on the box.
  • shadow-lg: This class is used to create lg shadow effects on the box.
  • shadow-xl: This class is used to create xl shadow effects on the box.
  • shadow-2xl: This class is used to create 2xl shadow effects on the box.
  • shadow-inner: This class is used to create shadow effects inside the box.
  • shadow-none: This class is used to dilute the shadow effects.

Syntax:

<element class="shadow-{shadow-depth}">...</element>

Example:

HTML




<!DOCTYPE html> 
<head
    <link href
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet"
</head
  
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold"
        GeeksforGeeks 
    </h1
    <b>Tailwind CSS Box Shadow Class</b
    <div class="grid grid-flow-col text-center p-2"
        <div class="shadow-sm w-24 h-24 bg-green-200 
                    rounded-lg">shadow-sm
        </div>
        <div class="shadow w-24 h-24 bg-green-200 
                    rounded-lg">shadow
        </div>
        <div class="shadow-md w-24 h-24 bg-green-200 
                    rounded-lg">shadow-md
        </div>
        <div class="shadow-lg w-24 h-24 bg-green-200 
                    rounded-lg">shadow-lg
        </div>
        <div class="shadow-xl w-24 h-24 bg-green-200 
                    rounded-lg">shadow-xl
        </div>
        <div class="shadow-2xl w-24 h-24 bg-green-200 
                    rounded-lg">shadow-2xl
        </div>
    </div
</body
  
</html>

Output:

Tailwind CSS Box shadow class




My Personal Notes arrow_drop_up
Recommended Articles
Page :