How to Set the Inset Shadow Using CSS ?

Last Updated : 09 Oct, 2024

In CSS, setting an inset shadow involves creating an inner shadow effect within an element's boundaries. Unlike traditional shadows that appear outside the element, an inset shadow gives a recessed or sunken look, enhancing the element's visual depth and appearance.

Note: By default, the shadow generates outside the box but by the use of inset we can create the shadow inside the box.

Approach: Inset Shadow with Box-Shadow Property

To apply an inset shadow, use the box-shadow property with horizontal (h-offset) and vertical (v-offset) values. Optionally, include blur and spread values, then add the `inset` keyword to shift the shadow inside the element, creating a recessed appearance.

Syntax

box-shadow: h-offset  v-offset  blur  spread  color | inset;

Example 1: In this example, we applies an inset shadow to the div using box-shadow: 5px 10px green inset, creating a green shadow inside the element with specified horizontal and vertical offsets.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        #GFG {
            /* For providing border to the element */
            border: 1px solid;
            /* For Padding */
            padding: 10px;
            /* Defining box-shadow property inset */
            box-shadow: 5px 10px green inset;
        }

        h2 {
            color: green;
        }
    </style>
</head>

<body>
    <h2>Box-shadow: 5px 10px inset:</h2>
    <div id="GFG">

        <p>Welcome to GeeksforGeeks</p>
    </div>
</body>

</html>

Output:

Example 2: In this example, we had set the h-offset value as 5px, v-offset value as 10px , blur value as 20px, spread value as 5px and color as gree

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        #GFG {
            /* For providing border to the element */
            border: 1px solid;
            /* For Padding */
            padding: 10px;
            /* Defining box-shadow property as inset */
            box-shadow: 5px 10px 20px 5px Green inset;
        }

        h2 {
            color: green;
        }
    </style>
</head>

<body>
    <h2>box-shadow: 5px 10px 20px 5px Green inset:</h2>
    <div id="GFG">

        <p>Inset, Green, Spread and Blur.</p>
    </div>
</body>

</html>