Neumorphism

뉴모피즘

Same-colour elements with a light and a dark shadow at once, so they look extruded from or pressed into the surface.

Also known as: Soft UINeo-skeuomorphism

···

html

<div class="row"><button class="neu" aria-pressed="false">♪</button><button class="neu" aria-pressed="true">❚❚</button><button class="neu" aria-pressed="false">➜</button></div>

css

body{background:#e4e8ef}
.row{display:flex;gap:28px}
.neu{width:84px;height:84px;border-radius:24px;border:0;background:#e4e8ef;color:#6b7280;font-size:24px;cursor:pointer;
  box-shadow:9px 9px 18px #c2c6cc,-9px -9px 18px #ffffff;transition:box-shadow .2s,color .2s}
.neu[aria-pressed=true]{color:#5b5bf7;box-shadow:inset 7px 7px 14px #c2c6cc,inset -7px -7px 14px #ffffff}

document.querySelectorAll('.neu').forEach(b => b.onclick = () => b.setAttribute('aria-pressed', b.getAttribute('aria-pressed') !== 'true'));

A Dribbble trend around 2019–2020. It is just two box-shadows (light top-left, dark bottom-right); the pressed state flips them to inset.

Its very low contrast makes it hard to tell what is clickable, so in practice it is limited to a few controls like toggles and sliders.