Gerador de Box Shadow CSS Online
Sombras bem aplicadas criam profundidade e hierarquia visual em interfaces. O Gerador de Box Shadow CSS permite ajustar cada parâmetro visualmente e gera o código CSS pronto para uso.
Parâmetros de box-shadow explicados
- Offset X/Y: Posição horizontal e vertical da sombra
- Blur: Suavidade das bordas da sombra
- Spread: Tamanho da sombra em relação ao elemento
- Cor e opacidade: Definem a aparência final
- Inset: Transforma em sombra interna (neumorfismo)
Múltiplas sombras em camadas
O CSS permite empilhar várias sombras no mesmo elemento. Isso é usado para criar efeitos de elevação realistas — como os cards do Material Design — combinando uma sombra difusa grande com uma sombra pequena e nítida.
Sombras e performance
Box shadows são renderizados pela GPU e têm boa performance. Para animações, prefira animar a opacidade da sombra em vez de outros parâmetros para manter 60fps.
Experimente: Gerador de Box Shadow CSS
Perguntas Frequentes
Qual a diferença entre box-shadow e drop-shadow?
Box-shadow aplica ao retângulo do elemento; drop-shadow segue o contorno do conteúdo, incluindo imagens PNG com transparência.
Como criar um efeito de elevação?
Combine duas sombras: uma longa e difusa (blur alto, opacidade baixa) e uma curta e nítida (blur baixo, opacidade moderada).
Posso usar cores diferentes para cada sombra?
Sim, cada camada de sombra pode ter sua própria cor e opacidade.