Neumorphism

How to use it

Add a dark drop shadow to the bottom right of an element, and a light drop shadow to the top left.

When to use it

Neumorphism is made up of more than just this effect, but this effect is a main part of its foundation. It's based on the idea that interfaces should look more like a real physical interface, but not as real as they did when skeuomorphism was popular. This means that interfaces use a more "Extruded plastic" look, since that's possible in reality, whereas most modern interfaces assume that everything is foating above a surface.

This is eye catching - that's mostly the only reason to use it, unless you're specifically going for an extruded plastic/rubberised look.

What to watch out for

This makes the most sense if the element is the same colour as the background, so they look like one continuous material. The contrast is not very high when using this technique, so some people will have a hard time telling between interactive element and background, unless you make the effect very obvious.

Examples

Example