Skip to content
Related Articles

Related Articles

Improve Article

How to set the inset shadow using CSS ?

  • Last Updated : 28 Apr, 2021

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. 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:

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:

Explanation: In the above example, we had set the h-offset value as 5px, v-offset value as 10px, and color as green.

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        #GFG {
            /* For providing border to the element */
            border: 1px solid;
            /* For Padding */
            padding: 10px;
            /* Difining 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>

Output:



Explanation: In the above 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 green.

 

Browser Support

Browser

Version

Chrome

10.0 4.0 -webkit-

Internet Explorer

9.0

Firefox

4.0 3.5 -moz-

Safari

5.1 3.1 -webkit-

Opera

10.5




My Personal Notes arrow_drop_up
Recommended Articles
Page :