How to make an inner shadow effect with CSS?

Although it seems Neumorphism comes with a couple of obvious downsides, its shadow effect is really appealing to me. Hence, I'm going to use this UI design trend principles to create an inner shadow effect.

The rule of thumb is that in Neumorphism, we need one general color and two different shadows: a light one and a dark one; and Yes! we have to stick to the shadow properties and color itself. Moreover, the edges are rounded. It helps to create the overall feeling of an integrated interface.

No panic! Creating such interface is as easy as the way you apply box-shadow in CSS; however, you need to do that more delicately!

1- As a reminder, here is the general code we use for box-shadow property:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

2- Plus, you know that shadows can come in drop type or inset type. The former is used to make the element extruded from the background, while the latter gives it a pressed effect. We need the latter here.

3- OK! here comes the final code and its visual result; simply write two types of box-shadow values (use a comma to attach them to one property) and keep in mind:

• One of them should have dark shade for the color value, while the other should have a light one.
• Both of them should have the inset value.
• Using rgba color code will result in more subtle effect.
• Please do not use it for critical elements like buttons! plus, always consider accessibility testing.

box-shadow: inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2), inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);