Gerador de box-shadow CSS
Gere CSS box-shadow com pré-visualização ao vivo. Ajuste deslocamento, desfoque, expansão, cor e opacidade e copie o código.
Pré-visualização
Parâmetros
Deslocamento X (px)
Deslocamento Y (px)
Desfoque (px)
Expansão (px)
Cor
Opacidade
CSS gerado
Sobre esta ferramenta
Ferramenta gratuita online para gerar CSS box-shadow para desenvolvedores front-end. A propriedade CSS box-shadow adiciona uma ou mais sombras a um elemento. Cada sombra é definida por deslocamento horizontal (offset-x), vertical (offset-y), raio de desfoque, expansão e cor. A palavra-chave opcional "inset" desenha a sombra por dentro. Ajuste todos os parâmetros com os sliders e seletor de cor, veja o resultado em tempo real na caixa de pré-visualização e copie o CSS gerado (ex.: box-shadow: 0 8px 24px 0 rgba(0,0,0,0.15);) para sua folha de estilos. Sem instalação; tudo roda no navegador.
Como usar
1. Ajuste os parâmetros: use os sliders ou campos numéricos para Deslocamento X (horizontal), Deslocamento Y (vertical), Desfoque e Expansão. Escolha a cor da sombra pelo seletor de cor ou valor HEX (ex. #000000) e a opacidade (0–1). Marque "Inset" para sombra interna.
2. Pré-visualização: a caixa de exemplo acima atualiza em tempo real. Confira o efeito antes de copiar.
3. Copiar código: quando estiver satisfeito, clique em "Copiar código" para copiar o CSS box-shadow para a área de transferência e cole no seu arquivo CSS ou estilos inline.