Generador de sombras CSS (box-shadow)

Mueve los controles y ve al momento cómo queda la sombra de una caja, una tarjeta o un botón. Combina varias capas para sombras más realistas o parte de uno de los ejemplos, y copia el código box-shadow para tu CSS.

Cómo funciona box-shadow

La propiedad box-shadow recibe hasta cuatro medidas y un color: desplazamiento horizontal y vertical (negativos hacia la izquierda y hacia arriba), desenfoque (0 = borde nítido), extensión (agranda o, en negativo, encoge la sombra) y el color, normalmente negro con transparencia (rgba(0, 0, 0, 0.2)). Con la palabra inset la sombra se dibuja dentro de la caja.

Se pueden encadenar varias sombras separadas por comas. Las sombras más realistas combinan una sombra corta y nítida con otra más grande y difusa, como hacen Material Design y la mayoría de sistemas de diseño.

Trucos con box-shadow

Una sombra sin desplazamiento ni desenfoque y con extensión (0 0 0 4px) dibuja un contorno que no ocupa espacio, ideal para el foco de botones y campos. El neumorfismo usa dos sombras opuestas, una clara y otra oscura, sobre un fondo del mismo color que la caja.

Las sombras no afectan a la maquetación ni al tamaño del elemento, pero las muy grandes y difusas en muchos elementos pueden ralentizar el desplazamiento en móviles. Para sombrear la silueta de una imagen PNG transparente usa filter: drop-shadow(), y para textos, text-shadow.