Gerador de CSS box-shadow
Gere um CSS box-shadow com pré-visualização ao vivo e código pronto para copiar.
🔒 100 % no cliente — nenhum dado enviado
Gere um CSS box-shadow com pré-visualização ao vivo e copie o código pronto para seu projeto. Ajuste deslocamento, blur, spread, cor e inset para criar efeitos de profundidade polidos. Tudo é calculado no seu navegador, sem cadastro e sem envio de dados.
FAQ
Como a propriedade box-shadow funciona?
box-shadow recebe um deslocamento horizontal e vertical, um raio de blur, um spread e uma cor, por exemplo: box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.2);
Como crio uma sombra interna (inset)?
Adicione a palavra-chave inset antes dos valores da sombra para projetá-la dentro do elemento em vez de fora.
Posso aplicar várias sombras a um único elemento?
Sim, basta separar cada sombra por vírgula na mesma declaração box-shadow para sobrepô-las em camadas.
Qual é a diferença entre blur e spread?
Blur suaviza as bordas da sombra, enquanto spread aumenta ou reduz seu tamanho antes da aplicação do blur.