- ¿Qué diferencia hay entre desenfoque (blur) y extensión (spread)?
- El desenfoque es lo suave que es el borde de la sombra: el radio en el que la sombra se desvanece hasta ser transparente. La extensión es lo grande que es la sombra antes de que empiece el desenfoque: una extensión positiva hace la sombra más grande que el elemento y una negativa, más pequeña. El sistema de elevación de Material Design usa extensión negativa con desenfoque positivo para crear sombras que parecen venir de una luz situada arriba y a un lado.
- ¿Por qué mis sombras se ven duras?
- Por tres motivos habituales. (1) La opacidad es demasiado alta: prueba con 0.08 a 0.15 en lugar del 0.5 que traen por defecto la mayoría de los generadores. (2) El color es negro puro: en el mundo real las sombras tiran un poco hacia el color de la superficie que hay debajo, pero en diseño de pantalla bajar la opacidad es la solución más sencilla. (3) Solo hay una capa: la mayoría de las sombras pulidas apilan dos, una ajustada para el contacto con la superficie y otra más suave para la difusión ambiental.
- ¿Qué hace la opción inset?
- Inset mueve la sombra al interior del elemento en lugar de al exterior. Se aplican las mismas reglas de desplazamiento, desenfoque, extensión y color, pero la sombra se dibuja dentro de la caja del borde del elemento. Úsala para campos hundidos, estados de botón pulsado, el interior de una píldora donde quieres sugerir profundidad o para añadir una textura sutil a una tarjeta sin usar una imagen de fondo.
- ¿Cuántas capas de sombra puedo apilar?
- CSS no tiene límite. Los navegadores dibujarán todo lo que les pongas, aunque cada capa añade un pequeño costo de pintado. Para diseño de interfaces, 1-3 capas cubren casi cualquier nivel de elevación. A partir de 4 capas sueles estar creando un efecto (neón, neumorfismo) más que profundidad, y esos estilos tienen sus propios generadores.
- ¿Por qué mis sombras se cortan por un lado?
- Algún elemento padre tiene overflow: hidden en algún punto del árbol. La sombra se dibuja fuera de la caja del elemento, así que cualquier ancestro con restricciones de overflow puede recortarla. Culpables habituales: una tarjeta dentro de un contenedor con esquinas redondeadas y overflow: hidden para recortar la imagen; una columna flex con min-height y overflow definidos. Se arregla añadiendo padding al padre para que la sombra tenga espacio donde dibujarse, o moviendo la sombra al padre.
- ¿box-shadow afecta al tamaño o a la disposición del elemento?
- No. box-shadow es puramente visual: se dibuja fuera de la caja pero no suma al ancho ni al alto del elemento ni mueve a los elementos hermanos. Es distinto de border, que sí suma al tamaño del modelo de caja salvo que uses box-sizing: border-box. Si una sombra se superpone a un elemento vecino y quieres separación, añade margin al elemento.
- ¿Cuánto cuesta en rendimiento un box-shadow complejo?
- En hardware moderno, es despreciable para elementos estáticos: el navegador compone la sombra en la misma capa que el elemento. Donde sí importa: al animar el propio box-shadow (cambiar el desenfoque o la extensión al pasar el cursor) se fuerza un repintado en cada fotograma y puede ir a tirones en dispositivos lentos. El truco de los diseñadores: animar la opacidad de un pseudoelemento apilado que tiene la sombra grande, en lugar de animar los valores de la sombra. El resultado se ve igual y va a 60fps.
- ¿Puedo usar esta sombra en Tailwind, Bootstrap o styled-components?
- Sí. El resultado es CSS normal: copia el valor de box-shadow y pégalo en cualquier sistema que acepte una regla CSS. En Tailwind, pon el valor en una clase con valor arbitrario como shadow-[0_4px_6px_-1px_rgb(0_0_0_/_0.1)]. En styled-components, pégalo dentro de un template literal. En Bootstrap, sobrescribe .shadow con el valor generado en tu CSS personalizado.
- ¿La misma sombra se verá igual en todos los navegadores?
- Casi. box-shadow lleva más de una década estable en Chrome, Firefox, Safari y Edge: el resultado coincide con un margen de un píxel en desplazamientos normales. Donde hay que fijarse: valores de extensión muy grandes combinados con desenfoques muy grandes pueden verse algo distintos en versiones antiguas de Safari. Mantén la extensión por debajo de 20px y el desenfoque por debajo de 50px para obtener los resultados más coherentes entre navegadores.
