How to set the inset shadow using CSS ? - GeeksforGeeks

17 Nov, 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;            /* 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>
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
surinderdawra388
CSS-Basics
CSS-Properties
CSS-Questions
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript