How to Add Shadow Effect on Hover to DIV Boxes in CSS ? Last Updated : 14 Nov, 2024 Comments Improve Suggest changes Like Article Like Report Here are two methods to add shadow effect on hover of a div container in CSS.1. Using box-shadow PropertyThe box-shadow property is used to add shadow effects around an element's frame. You can specify the horizontal and vertical offsets, blur radius, spread radius, and color of the shadow. HTML <!DOCTYPE html> <html> <head> <style> .box { width: 200px; height: 200px; background-color: #4CAF50; transition: box-shadow 0.3s ease; } .box:hover { box-shadow: 10px 10px 20px rgba(36, 36, 36, 0.5); } </style> </head> <body> <div class="box"></div> </body> </html> Output2. Using filter Property with drop-shadowThe filter property in CSS allows you to apply graphical effects like blurring or color shifting to an element. The drop-shadow function creates a shadow effect similar to box-shadow, but it can be applied to transparent images as well. HTML <!DOCTYPE html> <html> <head> <style> .box { width: 200px; height: 200px; background-color: #4CAF50; transition: filter 0.3s ease; } .box:hover { filter: drop-shadow(10px 10px 20px rgba(36, 36, 36, 0.5)); } </style> </head> <body> <div class="box"></div> </body> </html> Output Comment More infoAdvertise with us Next Article How to Add Shadow Effect on Hover to DIV Boxes in CSS ? V vkash8574 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to create an accordion hover effect with box-shadows in CSS ? The purpose of this article is to use box shadows for creating an accordion hover effect.Approach: The CSS box-shadow property is used to draw shadows around an element. CSS box-shadow property has the following syntax.Syntax:box-shadow : x-offset y-offset blur-radius spread-radius colorExample 1:Â H 2 min read How to add Borders and Shadows to Elements in CSS ? Apply box shadows to elements to create a 3D effect, whereas adding borders to containers or boxes can enhance the structural clarity of a layout. In this article, we will learn how to add borders and shadows to the elements in CSS. We will explore two different approaches to adding borders and shad 2 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 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 Set Depth of Box Shadow in CSS ? A powerful CSS box-shadow attribute may give web designs depth and dimension. Although CSS box-shadow first appears to be a straightforward property, there are many ways to use it to produce intricate shadow effects that can improve a website's aesthetic appeal and user experience. In this article, 7 min read Like