How to Create a CSS Inner Shadow
To create a CSS inner shadow, you must use the box-shadow property with the inset keyword. This is because if the inset keyword is not specified, by default, the shadow will appear as a drop shadow on the outside of the HTML element frame. Therefore, you must specify the inset keyword to change the shadow from outside to inside the frame creating an inner shadow effect. The keyword values that determine how the inner shadow will look include:
- inset (mandatory for inner shadows)
- offset-x
- offset-y
- blur-radius
- spread-radius
- color
You can include or exclude either one of these keyword values depending on how you want your inner shadow to look. Moreover, the color can be in any form such as text (as in "red"), hex, and RGB. The Codepens we created below show you exactly how to implement different types of inner shadows using CSS.
This code pen shows you how to implement a CSS inner shadow using only one inset:
This code pen shows you how to implement a CSS inner shadow using multiple insets:
This code pen shows you how to implement a CSS inner shadow combined with a drop shadow creating a more dynamic-looking HTML element. This inner shadow method can also be used to create beautiful buttons:
15 CSS Inner Shadow Examples
Below are 15 CSS inner shadow examples. You can copy the CSS code of each of these inner shadow examples to use in your own projects.
