Neste artigo
O que é CSS box-shadow?
A propriedade CSS box-shadow adiciona efeitos de sombra ao redor da moldura de um elemento. É uma das propriedades CSS mais utilizadas para criar profundidade e hierarquia visual no design web. Uma única declaração box-shadow pode incluir deslocamentos horizontais e verticais, raio de desfoque, raio de expansão e cor.
As sombras podem ser empilhadas — você pode aplicar múltiplas sombras a um único elemento separando-as com vírgulas. Essa técnica possibilita efeitos sofisticados como profundidade realista, bordas brilhantes e designs neumórficos. A palavra-chave inset inverte a sombra para dentro do elemento para efeitos de pressão ou rebaixamento.
Como funciona nosso gerador
O gerador de box-shadow do CheckTown fornece uma interface visual para criar sombras CSS. Ajuste os controles deslizantes, veja o resultado em tempo real e copie o CSS quando estiver satisfeito com o efeito.
- Ajuste o deslocamento X, deslocamento Y, raio de desfoque e raio de expansão com controles deslizantes intuitivos
- Escolha a cor da sombra com controle de opacidade, ative o modo inset e empilhe múltiplas sombras
- Comece com presets como Sutil, Médio, Grande ou Brilho — depois personalize para combinar com seu design
Experimente gratuitamente — sem cadastro
Criar uma sombra →Quando usar sombras de caixa
As sombras de caixa são essenciais para criar profundidade e hierarquia visual em interfaces web modernas. Elas guiam o olhar do usuário e comunicam interatividade.
- Elevação de cards e painéis — sombras sutis elevam os cards do fundo para criar uma interface em camadas
- Estados de botões — adicione ou aprofunde sombras no hover para indicar interatividade e fornecer feedback tátil
- Modais e dropdowns — sombras proeminentes separam elementos flutuantes da página abaixo
Perguntas frequentes
O box-shadow afeta o layout ou o desempenho?
As sombras de caixa não afetam o layout — são puramente visuais e não alteram o tamanho ou a posição do elemento no fluxo do documento. O desempenho é geralmente excelente em navegadores modernos, mas raios de desfoque muito grandes ou muitas sombras empilhadas em elementos frequentemente redesenhados podem impactar a velocidade de renderização.
É possível animar box-shadow?
Sim, box-shadow pode ser animado com transições CSS e keyframes. No entanto, animar box-shadow aciona repinturas, o que pode ser custoso. Para melhor desempenho, considere animar a opacidade em um pseudo-elemento com uma sombra fixa em vez de transicionar os valores da sombra em si.
Qual é a diferença entre box-shadow e drop-shadow?
box-shadow aplica uma sombra retangular à caixa do elemento (incluindo seu border-radius). filter: drop-shadow() aplica uma sombra que segue a forma real do elemento, incluindo áreas transparentes em imagens. Use box-shadow para elementos de interface e drop-shadow para imagens com transparência.