Gerador de sombras CSS (box-shadow)
Uma sombra sozinha raramente convence. A luz real produz ao mesmo tempo uma sombra de contato escura e nítida e outra larga e suave, por isso este gerador deixa você empilhar camadas e editar cada uma separadamente. Troque o fundo da prévia para escuro antes de considerar o trabalho pronto.
Predefinições
Camadas
O esmaecimento cobre aproximadamente esta distância, metade dela fora da borda da caixa.
Aumenta ou reduz a sombra antes de ela ser desfocada.
Só a prévia muda. O CSS abaixo continua o mesmo.
O que significam os cinco valores
Uma sombra simples é offset-x offset-y blur spread color. O navegador lê os comprimentos pela posição, então você não pode reordená-los, mas a cor pode ficar em qualquer uma das pontas: rgba(0,0,0,.2) 0 4px 8px é válido. Se você omitir o spread, ele vale zero. Se omitir também o blur, você obtém uma cópia da caixa com bordas duras, que é todo o truque por trás do estilo de sombra chapada deslocada.
O blur não é a distância que a sombra percorre
Este é o valor que as pessoas leem errado. O raio de desfoque não empurra a sombra para mais longe. Ele diz qual é a largura da borda suave, e esse esmaecimento fica centrado exatamente onde estaria a borda dura. Um blur de 24px distribui a transição ao longo de uns 24 pixels, cerca de metade fora do contorno da caixa e a outra metade para dentro. A especificação o define como uma aproximação de um desfoque gaussiano com desvio padrão igual à metade do raio de desfoque.
Duas consequências. Um blur grande sem spread negativo vaza pelas laterais, e é por isso que uma sombra pensada para ficar embaixo de um cartão acaba brilhando em volta dele. E uma sombra com blur mas sem deslocamento aparece nos quatro lados, porque metade desse esmaecimento escapa em todas as direções.
O spread acontece antes do blur
O spread infla ou desinfla o retângulo da sombra, e só depois o resultado é desfocado. O spread negativo é a solução para o vazamento acima: 0 18px 36px -14px encolhe a forma em 14 pixels primeiro, então depois do desfoque quase nada escapa para os lados e a sombra se lê como uma poça sob o elemento. A maioria dos sistemas de sombra que ficam bons usa spread negativo na sua camada maior.
Por que uma sombra sozinha sempre parece falsa
Um objeto real sob luz real projeta duas coisas ao mesmo tempo: uma sombra de contato pequena, escura e nítida bem onde ele encosta na superfície, e outra bem maior, mais fraca e difusa. Uma única sombra CSS pode ser uma ou a outra, nunca as duas, e é por isso que ela parece um adesivo. Empilhar de duas a quatro camadas com blur crescente e opacidade decrescente é toda a técnica, e é o que fazem as predefinições Cartão e Elevada acima.
A cor importa tanto quanto a geometria. Preto puro com pouca opacidade deixa cinza tudo o que cobre, o que parece sujo sobre qualquer coisa colorida. Puxar a sombra para uma versão escura do próprio tom da superfície — um azul-marinho profundo sob uma página cinza-azulada, por exemplo — se lê como sombra e não como borrão. O padrão aqui é um índigo bem escuro exatamente por essa razão.
Inset, e onde ele é pintado
Uma sombra inset é desenhada dentro da caixa de padding, acima do fundo mas abaixo do conteúdo. Ela é recortada pelo raio de borda, então acompanha os cantos arredondados automaticamente. Camadas inset e normais podem aparecer na mesma lista: são independentes e pintadas da primeira à última, com a primeira camada por cima.
box-shadow contra filter: drop-shadow
box-shadow acompanha a caixa de borda. Se o seu elemento é um PNG transparente, um ícone SVG ou algo recortado com clip-path, a sombra sai retangular do mesmo jeito. filter: drop-shadow() acompanha o canal alfa de verdade e dá a forma que você queria, a um custo de renderização maior e sem nenhum parâmetro de spread.
Layout e desempenho
Uma sombra não ocupa espaço no layout. Nada se move para abrir lugar para ela, o que significa que um ancestral com overflow: hidden vai cortá-la ao meio sem problema. Animar blur ou spread também obriga o navegador a repintar a sombra a cada quadro, o que é caro em elementos grandes. Coloque a sombra em um pseudoelemento e anime a opacidade dele.
Até onde esta ferramenta vai
A prévia mostra um elemento sobre um fundo liso. Páginas reais colocam cartões sobre fotografias e gradientes, e uma sombra ajustada no cinza pode sumir ali: troque o fundo da prévia antes de fechar o trabalho. Interfaces escuras são o caso mais difícil: preto a 14% de opacidade é quase invisível sobre uma superfície escura, e a maioria dos temas escuros acaba usando uma borda clara sutil, ou uma sombra bem mais pesada, em vez dos mesmos valores apenas atenuados. Esta ferramenta também não escreve text-shadow, que não aceita valor de spread e é uma propriedade diferente com uma sintaxe diferente.
Perguntas frequentes
Qual é a diferença entre blur e spread no box-shadow?
O spread muda o tamanho da forma da sombra antes de qualquer desfoque: positivo deixa a forma maior que a caixa, negativo deixa menor. O blur então suaviza a borda dessa forma, com o esmaecimento centrado no contorno, de modo que cerca de metade do desfoque cai para fora dele.
Como adiciono várias sombras a um mesmo elemento?
Separe-as por vírgulas dentro de uma única declaração box-shadow. A primeira da lista é pintada por cima. Uma segunda regra box-shadow não acrescenta uma camada: ela substitui a primeira por completo.
Por que minha sombra parece cinza e suja?
Porque ela é preto puro com pouca opacidade, o que dessatura tudo o que está embaixo. Use uma versão bem escura do tom do seu fundo em vez de #000 e a mesma geometria de repente vai parecer luz, não sujeira.
Por que meu box-shadow está cortado?
Uma sombra não ocupa espaço no layout, então um pai com overflow: hidden a recorta como a qualquer outro transbordamento. Remova o recorte, acrescente padding ao pai, ou mova a sombra para um elemento que não esteja dentro da área recortada.
Devo usar box-shadow ou filter: drop-shadow?
Use box-shadow para retângulos e retângulos arredondados, que é quase toda a interface. Use filter: drop-shadow quando o elemento tem transparência ou um clip-path e você precisa que a sombra siga a forma visível em vez da caixa de borda.
Última atualização 19 de setembro de 2026