Gerador de Box-Shadow CSS
Crie box-shadows CSS com múltiplas camadas, visualização ao vivo e código pronto para copiar
Seus dados nunca saem do seu dispositivobox-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
Perguntas Frequentes
-
Posso empilhar várias sombras?
Sim. Adicione até 8 camadas de sombra — elas são renderizadas em ordem (primeira camada no topo). É assim que efeitos de profundidade e neumórficos são construídos, usando uma sombra escura no canto inferior direito empilhada com uma sombra mais clara no canto superior esquerdo.
-
Qual a diferença entre blur e spread?
Blur suaviza a borda da sombra (maior = mais difusa). Spread aumenta ou diminui o tamanho da sombra uniformemente antes de aplicar o blur (positivo = maior, negativo = menor que o elemento).
-
O que o inset faz?
Inset renderiza a sombra dentro do elemento em vez de fora — útil para brilhos internos, efeitos de pressão e aparência de botões afundados.
-
Isso funciona em todos os navegadores?
Sim. box-shadow é CSS3 e suportado em todos os navegadores a partir do IE9, incluindo mobile.