Box-shadow: como criar sombras CSS realistas
A propriedade box-shadow adiciona sombras a qualquer elemento HTML, como cartões, botões e janelas. Com este gerador de box-shadow você ajusta cada parâmetro com controles deslizantes, combina várias camadas e copia o CSS pronto, vendo o resultado na hora.
Os parâmetros da sombra
- Deslocamento X e Y: movem a sombra na horizontal e na vertical. Valores positivos de Y simulam uma luz vindo de cima.
- Desfoque (blur): quanto maior, mais suave e espalhada fica a borda da sombra.
- Propagação (spread): aumenta ou diminui o tamanho da sombra. Valores negativos deixam a sombra menor que o elemento, um truque usado em sombras modernas.
- Cor e opacidade: sombras realistas raramente são pretas sólidas; opacidades entre 5% e 20% costumam funcionar melhor.
- Inset: desenha a sombra dentro do elemento, criando um efeito de baixo-relevo.
Por que usar várias camadas
Na vida real, as sombras têm uma parte mais escura e próxima do objeto e outra mais difusa e distante. Sombras com duas ou mais camadas imitam esse comportamento e parecem muito mais naturais do que uma camada única. Os estilos prontos "Suave", "Elevada" e "Em camadas" seguem essa técnica, usada nos principais sistemas de design.
Estilos especiais
- Neumorfismo: combina uma sombra clara e outra escura em lados opostos, com elemento e fundo da mesma cor, dando a impressão de que o elemento sai da superfície.
- Brilho (glow): sombra colorida sem deslocamento, ótima para botões em destaque e temas escuros.
- Borda dura: sombra sem desfoque, muito usada em estilos neobrutalistas.
Desempenho
Sombras grandes e com muito desfoque podem pesar em animações. Se for animar uma sombra, prefira animar a opacidade de um pseudo-elemento com a sombra já aplicada.