Xerador de sombras CSS (box-shadow)

Move os controis e mira ao momento como queda a sombra dunha caixa, unha tarxeta ou un botón. Combina varias capas para sombras máis realistas ou parte dun dos exemplos, e copia o código box-shadow para o teu CSS.

Como funciona box-shadow

A propiedade box-shadow recibe ata catro medidas e unha cor: desprazamento horizontal e vertical (negativos cara á esquerda e cara a arriba), desenfoque (0 = bordo nítido), extensión (agranda ou, en negativo, encolle a sombra) e a cor, normalmente negro con transparencia (rgba(0, 0, 0, 0.2)). Coa palabra inset a sombra debúxase dentro da caixa.

Pódense encadear varias sombras separadas por comas. As sombras máis realistas combinan unha sombra curta e nítida con outra máis grande e difusa, como fan Material Design e a maioría dos sistemas de deseño.

Trucos con box-shadow

Unha sombra sen desprazamento nin desenfoque e con extensión (0 0 0 4px) debuxa un contorno que non ocupa espazo, ideal para o foco de botóns e campos. O neumorfismo usa dúas sombras opostas, unha clara e outra escura, sobre un fondo da mesma cor ca caixa.

As sombras non afectan á maquetación nin ao tamaño do elemento, pero as moi grandes e difusas en moitos elementos poden ralentizar o desprazamento nos móbiles. Para sombrear a silueta dunha imaxe PNG transparente usa filter: drop-shadow(), e para os textos, text-shadow.