Box Shadow In Tailwind CSS
In this article, we are going to look closely at Tailwind box shadow with examples in order to gain a deeper understanding of how it works.
Tailwind Box Shadow class allows us to adjust the box-shadow of an element.
CSS Shadow Effect properties are used to achieve this in CSS.
In Tailwind CSS, this class accepts multiple values. These properties are covered in class form.
Syntax
<element class="shadow-{shadow-depth}">....</element>Tailwind Box Shadow Classes
| Classes | Overview |
| shadow-sm | The objective of this class is to produce a subtle shadow or faded effect on an element. |
| shadow | The aim of this class is to create a normal shadow effect on an element. |
| shadow-md | This class helps in creating a medium sized shadow on an element. |
| shadow-lg | Using this class a large sized shadow is applied on an element. |
| shadow-xl | An extra-large shadow is applied across an element using this class. |
| shadow-2xl | This class applies a double extra large shadow on an element. |
| shadow-inner | This class is unique as it applies shadow effects inside the element. |
| shadow-none | All shadow effects are removed using this class. |
For better understanding, below example illustrates the use of shadow-none and shadow-md classes:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Box Shadow Class in Tailwind CSS</p>
<p class="font-semibold my-2 text-gray-500">shadow-none and shadow-md</p>
<div class="grid grid-rows-2 grid-flow-col gap-5 text-center p-2 font-semibold">
<div class="shadow-none w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center">shadow-none
</div>
<div class="shadow-md w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center">shadow-md
</div>
</div>
</body>
</html>
Below example showcases the application of shadow-sm and shadow-lg classes:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Box Shadow Class in Tailwind CSS</p>
<p class="font-semibold my-2 text-gray-500">shadow-sm and shadow-lg</p>
<div class="grid grid-rows-2 grid-flow-col gap-5 text-center p-2 font-semibold">
<div class="shadow-sm w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center">shadow-sm
</div>
<div class="shadow-lg w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center">shadow-lg
</div>
</div>
</body>
</html>
Here is a brief example of shadow and shadow-xl classes in action:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Box Shadow Class in Tailwind CSS</p>
<p class="font-semibold my-2 text-gray-500">shadow and shadow-xl</p>
<div class="grid grid-rows-2 grid-flow-col gap-5 text-center p-2 font-semibold">
<div class="shadow w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center">shadow
</div>
<div class="shadow-xl w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center">shadow-xl
</div>
</div>
</body>
</html>
The following example utilizes the shadow-inner and shadow-2xl classes in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Box Shadow Class in Tailwind CSS</p>
<p class="font-semibold my-2 text-gray-500">shadow-2xl and shadow-inner</p>
<div class="grid grid-rows-2 grid-flow-col gap-5 text-center p-2 font-semibold">
<div class="shadow-inner w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center">shadow-inner
</div>
<div class="shadow-2xl w-full h-24 bg-gray-200
rounded-lg flex justify-center items-center">shadow-2xl
</div>
</div>
</body>
</html>
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
