An **inner shadow** can be created using the `box-shadow` property, which allows different types of shadows to be added to an element.

# Syntax
```css
box-shadow: none|h-offset v-offset blur spread color |inset;
```
| **value**    |  **description**   |
| --- | --- |
|  *none*   |  It sets the default value with no shadow.   |
|  *h-offset*   | Its value is compulsory for the horizontal shadow effect.    |
| *v-offset*    |  Its value is compulsory for the vertical shadow effect.    |
| *blur*    |  It sets the radius value for the blur effect.   |
| *spread*    |  It sets the radius value for the spread effect.   |
|  *color*   |  It sets the color for the shadow effect.   |
|<mark>*inset*</mark> | <mark>This property changes the outer shadow to the inner shadow.</mark>    |


# Implementation

#example_inner {
  border: 1px solid;
  box-shadow: 5px 10px 5px pink inset;
}

#example_simple {
  border: 1px solid;
  box-shadow: 5px 10px 5px pink;
}

<html>
 <head>
 </head>
 <body>
   <div id='example_inner'>
     <p>This is an inner shadow.</p>
   </div>
    <br>
   <div id='example_simple'>
     <p>This is a simple shadow.</p>
   </div>
 </body>
</html>

value	description
none	It sets the default value with no shadow.
h-offset	Its value is compulsory for the horizontal shadow effect.
v-offset	Its value is compulsory for the vertical shadow effect.
blur	It sets the radius value for the blur effect.
spread	It sets the radius value for the spread effect.
color	It sets the color for the shadow effect.
inset	This property changes the outer shadow to the inner shadow.

How to create an inner shadow using CSS

Syntax

Implementation