How to Create a Box Shadow in CSS ?

Last Updated : 07 Mar, 2024

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 property
Using the filter property

Create a Box Shadow Using box-shadow property

The 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:
D3SS

Create a Box Shadow Using the filter property

The 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>