Entendendo a propriedade CSS box-shadow
A estilização visual de interfaces web avançou muito, e as sombras desempenham um papel vital para criar profundidade, destaque e hierarquia nos elementos (como cartões, modais e botões).
Os valores do Box Shadow
- Offset X (Eixo Horizontal): Valores positivos movem a sombra para a direita, negativos para a esquerda.
- Offset Y (Eixo Vertical): Valores positivos movem a sombra para baixo, negativos para cima.
- Blur Radius: Quanto maior o valor, mais difusa (desfocada) e suave será a sombra. Valor 0 a deixa sólida.
- Spread Radius: Valores positivos expandem a sombra além das dimensões do elemento; negativos a contraem.
- Color / Opacity: Recomenda-se usar
rgba()para manter a sombra suave e transparente, integrando-se bem ao fundo do site.