Inset shadows vs drop shadows: cuando usar cada una

Entender la diferencia entre inset y drop shadows es importante si quieres una interfaz con profundidad creible y no solo decoracion aleatoria.

Drop shadows

Las drop shadows hacen que el elemento parezca separado del fondo.

.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.elevated {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

Suelen encajar bien en cards, botones, modales y tooltips.

Inset shadows

Las inset shadows empujan el volumen hacia dentro y funcionan mejor para estados presionados, campos de entrada y superficies hundidas.

.pressed-button {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.input-field {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

Neumorphism

Cuando combinas luces y sombras externas o internas puedes crear un efecto suave en 3D, pero conviene usarlo con moderacion.

.neuro-card {
  background: #e0e0e0;
  box-shadow:
    8px 8px 16px #bebebe,
    -8px -8px 16px #ffffff;
}
.neuro-pressed {
  box-shadow:
    inset 4px 4px 8px #bebebe,
    inset -4px -4px 8px #ffffff;
}

Regla simple

• drop shadow para elevar
• inset shadow para hundir
• ambas solo cuando la interfaz realmente lo necesita

Conclusion

La sombra correcta no se decide por moda, sino por el comportamiento visual que necesitas comunicar. Si una superficie debe parecer levantada, usa drop. Si debe parecer presionada o interna, usa inset.

Puedes ajustar ambos enfoques con nuestro Shadow Generator.