Qué hace esta herramienta
Una sombra de caja es la zona oscura, suave o dura, que hace que una tarjeta, un botón o un menú parezcan elevados sobre la página. En CSS es una sola propiedad, box-shadow, pero admite hasta seis valores por sombra y cualquier número de sombras, algo difícil de imaginar solo con números. Esta herramienta te deja construirla cambiando los números y viendo cómo reacciona una tarjeta, y te da el CSS para copiar. Puedes apilar hasta ocho capas, usar sombras interiores, elegir el color con transparencia y pegar un box-shadow existente para editarlo. Todo se ejecuta en tu navegador y no se sube nada.
Qué hace cada número
La sintaxis de una sombra es inset? offset-x offset-y blur spread color. Los dos desplazamientos mueven la sombra a la derecha y hacia abajo; los negativos, a la izquierda y hacia arriba. El desenfoque suaviza el borde: la especificación pide un desenfoque gaussiano con desviación típica igual a la mitad del valor, así que 30px se desvanece en unos 30px. Nunca puede ser negativo. La extensión agranda la sombra en todas direcciones antes de desenfocarla, o la reduce si es negativa. Una extensión negativa con un desplazamiento vertical grande da el aspecto de "elevada", porque la sombra es menor que la tarjeta y solo asoma por debajo. Una sombra sigue el border-radius de la tarjeta y no cambia el diseño alrededor.
Capas: por qué varias sombras parecen más reales
La luz real no hace una sombra uniforme. Cerca del objeto la sombra es pequeña y oscura; más lejos, ancha y tenue. La plantilla En capas lo imita con cinco sombras, cada una el doble que la anterior y todas al 8 % de opacidad: 0 1px 1px, 0 2px 2px, 0 4px 4px, 0 8px 8px y 0 16px 16px. Su suma es más suave que una sola sombra con el mismo desenfoque total. En CSS las sombras se separan con comas y la primera se dibuja encima, así que el orden importa cuando se solapan.
Las sombras quedan mejor en un color oscuro transparente que en un gris sólido, porque el color de la página se transparenta. La opacidad es parte del color: rgba(0, 0, 0, 0.15) y el hex #00000026 son el mismo color, y puedes elegir cualquiera de los formatos. Sobre un fondo oscuro una sombra negra casi no se ve; usa un desplazamiento mayor, más opacidad o un resplandor de color.
drop-shadow() y datos útiles
filter: drop-shadow() es un pariente de box-shadow que sigue el contorno visible de lo dibujado, ideal para un PNG con esquinas transparentes o un icono SVG. No tiene extensión ni inset, así que la herramienta ofrece esa versión solo para capas que no los usan. Las sombras se dibujan fuera de la caja, así que un ancestro con overflow: hidden las recorta. En modo de colores forzados (alto contraste), los navegadores quitan las sombras de caja, así que no dependas solo de una sombra para mostrar el foco. Combínalas con el generador de degradados y comprueba el color del texto con las herramientas de color.
