How to Create a Box Shadow in CSS ?

Last Updated : 28 Apr, 2025

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