How to set the inset shadow using CSS ?

Last Updated : 05 May, 2023

In CSS, the box-shadow property adds shadow effects around an element’s frame. We can set multiple effects around an element separated by commas. A box-shadow is defined as X and Y relative offset values to the element, blur and spread radius, and color.

In this article, we will learn how to set the inset shadow using CSS. The Inset property changes the outer shadow to the inner shadow.

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

Syntax:

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

Approach: To give the inset shadow to an element, we will use the box-shadow property. In the box-shadow property, we will define the h-offset value ( It is compulsory for the horizontal shadow effect ), then the v-offset value (It is compulsory for the vertical shadow effect ).

We can also give a blur effect and spread the shadow using blur and spread values. In the end, we will use the inset keyword which will change the shadow inside the frame.

Example 1: In this example, we are using the above-explained approach, we had set the h-offset value as 5px, the v-offset value as 10px, and the color as green.

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>