Gerador de Box Shadow CSS

O que é o box-shadow do CSS?

A propriedade CSS box-shadow adiciona efeitos de sombra à volta do quadro de um elemento. As sombras são uma ferramenta fundamental para criar profundidade, elevação e hierarquia visual no design web. Uma sombra bem elaborada pode fazer um cartão parecer flutuar acima da página ou dar a um botão a aparência de ter sido pressionado.

O box-shadow aceita vários parâmetros: deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de propagação e cor. Também pode adicionar a palavra-chave inset para criar sombras internas. Várias sombras podem ser sobrepostas num único elemento separando-as com vírgulas, sendo renderizadas de trás para a frente.

Sintaxe do box-shadow explicada

A sintaxe completa é: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Os valores offset-x e offset-y são obrigatórios e definem a posição da sombra em relação ao elemento. Valores positivos movem a sombra para a direita e para baixo. O blur-radius suaviza as bordas — um valor de 0 cria uma sombra nítida. O spread-radius expande ou encolhe a sombra — valores negativos criam uma sombra mais compacta.

Como utilizar esta ferramenta

Ajuste os cursores para o deslocamento horizontal, deslocamento vertical, desfoque, propagação e cor. A pré-visualização atualiza em tempo real para que possa ver exatamente como a sombra vai ficar. Ative a opção inset para sombras internas. Adicione várias camadas de sombra para efeitos de profundidade mais realistas. Quando estiver satisfeito, copie o código CSS gerado.

Dicas para sombras eficazes

• Use sombras subtis com baixa opacidade para uma aparência limpa, moderna e elevada.
• Sobreponha várias sombras para obter profundidade mais realista — uma sombra próxima e nítida mais uma sombra difusa e suave imita a iluminação do mundo real.
• Um desfoque maior com um ligeiro deslocamento cria um efeito de flutuação suave, ideal para cartões e modais.
• A propagação negativa cria uma sombra mais compacta e focada, útil para bordas subtis.
• Mantenha uma direção de sombra consistente em toda a página — fontes de luz inconsistentes parecem artificiais.

Sistema de elevação do Material Design

O Material Design da Google define níveis de elevação de 0dp a 24dp, cada um com valores de sombra específicos. Uma elevação maior significa valores de desfoque e deslocamento maiores. Este sistema garante uma hierarquia visual consistente em toda uma aplicação. Mesmo que não siga o Material Design, o princípio de usar níveis de elevação consistentes é valioso para qualquer sistema de design.

Impacto no desempenho

As sombras box são aceleradas por GPU nos browsers modernos e têm um impacto mínimo no desempenho para uso típico. Contudo, raios de desfoque muito grandes (50px+) em muitos elementos simultaneamente podem causar quebras de fotogramas durante animações. Se precisar de animar sombras, considere usar transform: scale() para expandir um pseudo-elemento com uma sombra estática em vez de animar os valores da sombra diretamente.

Perguntas frequentes

Qual é a diferença entre box-shadow e drop-shadow?

O box-shadow aplica-se ao quadro retangular do elemento, incluindo o padding e a borda. A função filter: drop-shadow() segue a forma real do elemento, incluindo as regiões transparentes em imagens. Use drop-shadow para elementos não retangulares, como ícones ou imagens PNG com transparência.

Posso usar o box-shadow para criar bordas?

Sim. Um box-shadow com desfoque zero e propagação positiva funciona como uma borda que não afeta o layout. Esta técnica é útil quando precisa de uma borda visual sem alterar as dimensões do elemento, por exemplo em estados de hover.