How to set the inset shadow using CSS ?
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.
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.
Explanation: In the above example, we had set the h-offset value as 5px, v-offset value as 10px, and color as green.
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.
10.0 4.0 -webkit-
4.0 3.5 -moz-
5.1 3.1 -webkit-