Tailwind CSS - Box Shadow
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>
Advertisements