Soft UI. Background and element share a color — dual shadows do the entire 3D illusion. Click the buttons in the demo to feel them press.
Neumorphism (new + skeuomorphism) creates buttons and cards that look like they are physically pushed out of or pressed into the background surface. Everything is the SAME color — the background and the element share an identical color. What creates the 3D illusion is a pair of shadows: one dark shadow from the bottom-right and one light (near-white) shadow from the top-left.
The trick is all in box-shadow. You apply two shadows simultaneously. The dark shadow simulates where light would NOT hit a raised surface. The light shadow simulates where light WOULD hit. Because both the background and the element are the exact same color (like #e0e5ec), the element appears to grow organically from the surface rather than sit on top of it.
Create a neumorphism music player dashboard on a #e0e5ec background. Build raised circular play/pause buttons using dual box-shadows: box-shadow: 6px 6px 12px #b8bec7, -6px -6px 12px #ffffff. Add pressed (active) state with inset shadows: inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff. Include a volume slider and track progress bar in the same neumorphic style.