How to Create a Box Shadow in CSS ? Last Updated : 28 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report A box shadow in CSS is a visual effect that adds a shadow to an HTML element, creating a sense of depth and dimension. It is a styling technique commonly used to enhance the visual appearance of elements on a webpage. Below are the approaches to creating a box shadow in CSS: Table of Content Using box-shadow propertyUsing the filter propertyCreate a Box Shadow Using box-shadow propertyThe box-shadow property allows you to specify the shadow on horizontal and vertical offsets, blur radius, spread radius, and color. It is a widely supported method. Example: The below code implements the box-shadow property of CSS to create a box-shadow. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Box Shadow Example - Approach 1 </title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .box-example { width: 300px; height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; } .box1 { box-shadow: 4px 4px 8px #888888; } </style> </head> <body> <div class="box-example box1"> <h2 style="color: green;"> GeeksforGeeks </h2> <h3> Added box-shadow to this div </h3> </div> </body> </html> Output: Create a Box Shadow Using the filter propertyThe filter property can be used to achieve a box shadow effect. You can use it directly as the box-shadow property was used with some value. Example: The below code will explain the use of the filter property to add shadow to an element. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Filter Property Example </title> <style> .box-example { width: 350px; height: 350px; background-color: #99de98; margin: 10% auto; border-radius: 5px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: Arial, sans-serif; color: #fff; font-size: 18px; font-weight: bold; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); } </style> </head> <body> <div class="box-example"> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Box shadow is applied using the filter property in CSS. </h2> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create a teardrop in HTML and CSS ? K kokaneit92 Follow Improve Article Tags : HTML CSS-Questions Similar Reads How to Add Shadow in CSS? Shadows in CSS can be used to create depth and visual interest by adding the effect that simulates the shadow of an element. It can be applied to both the text and block elements to enhance the design of the web pages. CSS can provide several properties to achieve different shadow effects, including 4 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 create a teardrop in HTML and CSS ? In this article, we will see how to create a teardrop in HTML and CSS. We have used two approaches one with only CSS using the border-radius property and the other with SVG where the path can include a bezier curve to create the teardrop having more control with curves. Table of Content Using border 2 min read How To Create A Box in HTML? In HTML, you can create a "box" using several techniques, such as using <div> elements and styling them with CSS. These boxes can be used for various purposes, such as creating layouts, buttons, or sections within a webpage.Method 1. Div Element with CSSThe <div> element is a block-level 3 min read How to Create a Gradient Shadow using CSS ? A gradient shadow in CSS refers to creating a shadow effect that transitions smoothly from one color to another, using gradients. While the box-shadow property doesn't support gradients directly, you can simulate this effect by layering a semi-transparent gradient as the background or using pseudo-e 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 Like