How to Apply Inset to Box Shadow in Tailwind CSS? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report In web development, shadows play a significant role in attracting user attention. By applying shadows to elements on our web pages, we can enhance their visual appearance and attract the user's focus. In Tailwind CSS, we can apply an insert box shadow by using the "shadow-inner" utility class.ApproachFirst, create a basic HTML structure and include the Tailwind CSS CDN link in your file.Then use Tailwind CSS's "grid" utility class to create a layout with two columns. Add some spacing between the grid items using the "gap" utility class.Inside the grid layout, add some "div" elements with different background colors using Tailwind's utility classes. And also use "w-64" and "h-64" for width and height, and "flex" to center the content.To show the shadow on hover, use Tailwind's hover: prefix. The "hover:shadow-2xl" class adds a large shadow when the user hovers over the div.Example: A responsive web page showcasing a grid of colorful, hover-animated boxes with shadows using Tailwind CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hover Box Shadow</title> <script src="https://cdn.tailwindcss.com/3.4.16"> </script> </head> <body class="flex items-center justify-center min-h-screen bg-gray-100"> <div class="grid grid-cols-2 gap-8"> <div class="w-64 h-64 bg-blue-400 flex items-center justify-center text-white font-semibold rounded-lg hover:shadow-2xl transition-shadow duration-300"> Hover Me! </div> <div class="w-64 h-64 bg-green-400 flex items-center justify-center text-white font-semibold rounded-lg hover:shadow-2xl transition-shadow duration-300"> Hover Me! </div> <div class="w-64 h-64 bg-pink-400 flex items-center justify-center text-white font-semibold rounded-lg hover:shadow-2xl ctransition-shadow duration-300"> Hover Me! </div> <div class="w-64 h-64 bg-purple-400 flex items-center justify-center text-white font-semibold rounded-lg hover:shadow-2xl transition-shadow duration-300"> Hover Me! </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How To Add Custom Box Shadow In Tailwind CSS? S skaftafh Follow Improve Article Tags : CSS Similar Reads How to Add Text Shadow in Tailwind CSS? Adding a text shadow in Tailwind CSS is useful for making text for creating visual effects like glows and embossed or debossed effects. Tailwind CSS does not provide text shadow utilities out of the box but it allows you to easily extend its functionality to add custom utilities. In this article, we 3 min read How To Add Custom Box Shadow In Tailwind CSS? Tailwind CSS is a utility-focused CSS framework. Offers a wide range of design utilities. It does include predefined shading, however, for unique design needs, you might want a custom box shadow that goes beyond the default. in this article, you will learn how to extend Tailwind's default shadow and 3 min read How to Add Padding to All Sides in Tailwind CSS ? Tailwind CSS is a utility-first CSS framework that provides a vast array of classes to design your website directly in your markup. It emphasizes speed, efficiency, and reduces the time you spend styling in CSS files. One of the most common styling tasks in web development is adding padding to eleme 3 min read How to Add Shadow to Button in CSS ? This article will show you how to add shadow to a button using CSS. Button shadow can enhance its visual appeal and make it stand out on your webpage. This article will cover various approaches to adding shadow to a button using CSS. Table of Content Add Shadow on button using box-shadow PropertyAdd 3 min read How to Add Shadow to Image in CSS ? Adding shadow to an image can enhance its visual appeal and make it stand out on your webpage. In this article, we will explore various approaches to add shadow to an image using CSS. Table of Content Add Shadow on Image using box-shadow PropertyAdd Shadow on Image on HoverAdd Shadow on Image using 2 min read How to Add a Clip Path to Image in Tailwind CSS ? Web application designers can create creative and eye-catching designs with Tailwind CSS's flexibility in applying clip paths to images. Developers can create complex shapes by using clip paths, which define an element's visible region. Custom Clip Paths using TailwindTailwind CSS's custom clip path 2 min read Like