Gerador de box-shadow
Componha sombras em camadas com prévia ao vivo — elevação suave, deslocamentos nítidos, sombras internas e predefinições prontas.
Como o gerador de box-shadow funciona
Crie sombras CSS em camadas com controles por camada e prévia ao vivo e copie CSS pronto para produção.
Sombras em camadas
Na vida real, a elevação raramente é uma sombra só. Empilhe até seis camadas — uma sombra de contato bem justa e outras ambientes mais largas — para uma profundidade natural, e não borrada.
Controle total
Cada camada tem deslocamento X/Y, desfoque, expansão, cor e opacidade, além de uma opção inset para sombras internas. Tudo se atualiza na prévia ao vivo enquanto você arrasta.
Prévia em fundo claro e escuro
As sombras parecem diferentes em superfícies escuras. Troque o fundo da prévia para conferir os dois temas antes de publicar.
Predefinições para começar
As predefinições “Suave”, “Em camadas”, “Nítida”, “Flutuante” e “Interna” são um bom ponto de partida — ajuste a partir delas e copie o CSS final em um clique.
Perguntas frequentes
offset-x offset-y blur spread. Os offsets movem a sombra, o blur suaviza a borda e o spread aumenta ou diminui a sombra antes do desfoque. Uma cor (de preferência com alfa) completa o valor.
Um único desfoque grande parece chapado e acinzentado. Combinar uma sombra pequena e nítida (de contato), uma média (da luz principal) e uma grande e suave (ambiente) imita o comportamento real da luz e mantém as bordas nítidas.
O inset desenha a sombra dentro do elemento — é usado em botões pressionados, campos de entrada rebaixados e na metade escura de superfícies neumórficas.
Animar o box-shadow redesenha cada quadro. Para uma elevação suave no hover, prefira animar a opacity de um pseudoelemento que já tenha a sombra final.