Empilhe camadas de sombra com deslocamento, desfoque, espalhamento, cor e inset, pré-visualize em claro ou escuro e copie o CSS.
As sombras são geradas localmente no seu navegador. Nada sai do seu dispositivo.
Um valor de box-shadow tem cinco partes em ordem fixa: offset-x (deslocamento horizontal, positivo vai para a direita), offset-y (positivo vai para baixo), raio de desfoque (o quanto a borda se espalha; 0 dá uma silhueta dura), espalhamento (encolhe ou aumenta a sombra antes do desfoque —negativo a recolhe, positivo a infla) e a cor, montada aqui com o matiz escolhido mais um slider de opacidade que vira o alfa do rgba(). A palavra-chave inset inverte tudo para pintar dentro do border-box em vez de atrás.
Para um anel de 1px que não pode mudar o tamanho da caixa, o truque da sombra vence: inset 0 0 0 1px desenha o contorno dentro do border-box sem impacto no layout, então padding, largura e border-radius ficam exatamente como projetados. Uma borda real soma ao elemento (mesmo com border-box ela come espaço de conteúdo) e desloca o interno pela sua espessura. Sombras também acompanham transform e zoom sem reflow.
Não — box-shadow sempre sombreia o retângulo border-box, nunca a silhueta alfa da imagem, então um recorte ganha um quadrado sombreado atrás. A propriedade irmã para esse trabalho é filter: drop-shadow(8px 8px 6px rgba(0,0,0,0.4)), que segue os pixels visíveis de imagens e SVGs. Ela não aceita spread e fica sempre atrás do elemento, mas para adesivos e logos é a ferramenta certa.
text-shadow pinta cópias do desenho das letras, não de uma caixa: aceita offset-x, offset-y e desfoque, mas não tem palavra-chave spread nenhuma, e pode ser empilhado por vírgulas para glow como 0 0 8px. Ele acompanha o texto em si —inclusive ::first-line e ::first-letter—, por isso o CSS gerado aqui não mexe em nenhuma sombra de texto que você já tenha.
Animar box-shadow direto força repaint a cada frame: hover em poucos elementos vai bem, mas listas longas de sombras animadas podem engasgar em hardware fraco. A otimização clássica é um pseudo-elemento segurando a sombra final, transicionado com opacity, que o navegador costuma conseguir compor. A quantidade de camadas desfocadas pesa mais que a distância: três camadas suaves empilhadas custam menos que uma sombra interpolada a cada frame.
Não. Toda sombra é calculada no seu navegador a partir dos sliders e entregue à sua área de transferência como CSS puro. Não há conta, armazenamento nem requisição de rede, e a página continua funcionando sem internet.
Se você acabou de usar Gerador de Box Shadow, os próximos passos naturais são Gerador de Border Radius, Conversor de cores, Conversor HEX para RGB, ou explore todas as ferramentas de Ferramentas diárias.