Gerador Box Shadow CSS Online
Crie sombras CSS com preview ao vivo. Múltiplas camadas, inset, blur e spread.
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);
Por que usar
Sombras CSS perfeitas sem precisar adivinhar os valores
Preview instantâneo
Ajuste deslocamento, desfoque, espalhamento e cor com controles deslizantes. Resultados imediatos.
Múltiplas camadas
Empilhe sombras para efeitos realistas. Adicione ou remova camadas facilmente.
Sombras inset
Alterne entre sombras externas e internas com um clique.
Sem instalações
Tudo no navegador. Sem ferramentas de design externas necessárias.
Como funciona
Três passos, sem complicação
Configure a sua sombra
Ajuste deslocamento X, deslocamento Y, raio de desfoque, raio de espalhamento e cor usando os controles visuais. Ative o inset para sombras internas.
Adicione múltiplas sombras
A propriedade box-shadow aceita várias sombras separadas por vírgula. Combine camadas para criar efeitos realistas de elevação ou profundidade.
Copie o CSS
O código box-shadow é gerado em tempo real. Copie a propriedade completa pronta para a sua folha de estilos.
Perguntas frequentes
Ficou com dúvidas?
Sim. A propriedade box-shadow aceita uma lista separada por vírgulas: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). As sombras são renderizadas em ordem: a primeira da lista aparece por cima. Isso é essencial para sombras multi-camada realistas, seguindo o princípio de que sombras naturais têm um componente de umbra (escuro e nítido) e um de penumbra (difuso e amplo).
A palavra-chave inset muda a sombra de externa para interna. Em vez de se projetar para fora do elemento, a sombra aparece dentro de suas bordas, criando a ilusão de que o elemento está recuado ou pressionado. Usada para simular botões pressionados, campos de entrada ativos e efeitos de relevo invertido (como no design neumórfico).
Box-shadows são renderizadas durante a fase de pintura do navegador e podem acionar repinturas custosas quando animadas. Ao contrário de transform e opacity (que operam na camada compositing sem repintura), animar box-shadow pode causar queda de frames. A equipe do Chrome recomenda usar filter: drop-shadow() para elementos que precisam de sombras animadas, ou usar pseudo-elementos com opacity animada para simular o efeito com melhor desempenho.
text-shadow se aplica apenas ao texto renderizado, seguindo o contorno de cada glifo. box-shadow se aplica ao modelo de caixa do elemento (border-box), ignorando completamente o conteúdo. Aplicar box-shadow a um span de texto produz uma sombra retangular (ou arredondada se o elemento tiver border-radius). Para uma sombra que siga o formato exato do conteúdo (incluindo texto ou imagens transparentes), use filter: drop-shadow().
Sombras realistas combinam pelo menos duas camadas: uma sombra de alta opacidade e desfoque pequeno para a umbra, e uma de baixa opacidade e desfoque grande para a penumbra. O sistema de elevação do Material Design do Google define 24 níveis de elevação, cada um com valores específicos de box-shadow. Por exemplo, a elevação 8 (cartões flutuantes) usa: box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12).
CSS box-shadow: renderização, neumorfismo e elevação no Material Design
A propriedade box-shadow foi introduzida no CSS3 (módulo Backgrounds and Borders do W3C) e alcançou suporte completo sem prefixo em 2012. Antes do CSS3, os desenvolvedores simulavam sombras com imagens PNG de 9 fatias (nine-patch), uma técnica pesada em largura de banda e manutenção. A sintaxe do box-shadow define, em ordem: offset-x, offset-y, blur-radius, spread-radius e cor, com a palavra-chave inset opcional. O parâmetro spread é exclusivo do box-shadow e não tem equivalente em filter: drop-shadow() nem em text-shadow.
A renderização de sombras em navegadores modernos usa camadas compositing. Quando um elemento tem box-shadow, o navegador o promove a sua própria camada de pintura para renderizar a sombra de forma independente. Isso tem implicações de memória na GPU: cada camada adicional consome VRAM. Em dispositivos com VRAM limitada (celulares de entrada), excesso de box-shadows pode causar queda de frames. A alternativa filter: drop-shadow() usa o pipeline de filtros CSS, que no Chrome é processado pela GPU de forma mais eficiente, embora seu comportamento difira em elementos com border-radius.
O neumorfismo, a tendência de design de interface que viralizou em dezembro de 2019 após uma publicação no Dribbble de Alexander Plyuto, depende exclusivamente de box-shadows para criar a ilusão de elementos extrudados do fundo. A receita típica combina duas sombras: uma clara (deslocamento positivo, como se a luz viesse do canto superior esquerdo) e uma escura (deslocamento negativo). O sistema de elevação do Material Design do Google, documentado em material.io, define 24 níveis de elevação com valores de box-shadow matematicamente calculados para simular de forma consistente a luz ambiente e direta em toda a interface.