Lograr múltiples sombras paralelas en un elemento usando CSS

Al intentar recrear un diseño de botón de Photoshop en CSS, es posible que encuentres una limitación al aplicar múltiples sombras de cuadro a un elemento único. De forma predeterminada, CSS permite solo una sombra de cuadro activa, ya sea interna o externa.

Para superar esta limitación, puede aprovechar la función de separación por comas proporcionada por CSS3. Esto le permite especificar múltiples definiciones de sombra dentro de la misma propiedad box-shadow:

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;

Separando las dos definiciones de sombra con una coma, puede crear efectivamente dos sombras distintas en el elemento de su botón. La primera sombra, insertada 0 2px 0px #dcffa6, representa la sombra interior de la caja de luz, mientras que la segunda sombra, 0 2px 5px #000, crea la sombra paralela exterior.

Esta técnica le permite lograr el botón deseado peinado con dos sombras aplicadas simultáneamente, proporcionando un efecto más realista y visualmente atractivo.