Gerador de Sombra CSS
O que é Gerador de Sombra CSS
Um gerador de sombra CSS permite montar um box-shadow de forma visual e copiar o CSS exato. Defina o deslocamento horizontal e vertical, o raio de desfoque, a expansão e a cor da sombra com sua opacidade, e veja a prévia mudar enquanto você arrasta cada controle. Você pode empilhar várias sombras no mesmo elemento e marcar qualquer camada como interna, então o campo de saída sempre traz uma declaração box-shadow pronta para colar.
Como usar
- Arraste os controles de deslocamento para mover a sombra na horizontal e na vertical.
- Ajuste o raio de desfoque para uma borda suave e a expansão para aumentar ou reduzir a sombra.
- Escolha a cor da sombra, ajuste a opacidade e marque interna para uma sombra por dentro.
- Adicione mais camadas se precisar e copie o CSS gerado no campo de saída.
Quando usar
Precisa de uma sombra de card discreta, com cara de moderna em vez de dura? Defina o deslocamento em 0px e 10px, desfoque de 20px, sem expansão e cor preta a 25% de opacidade, depois copie box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); direto para sua folha de estilo. Serve também para estados de hover de botões, profundidade em camadas ou uma sombra interna que deixa um campo com aparência afundada.
Perguntas frequentes
O que significam os valores do box-shadow?
Na ordem, são o deslocamento horizontal, o deslocamento vertical, o raio de desfoque, a expansão e a cor. Deslocamentos positivos empurram a sombra para a direita e para baixo, o desfoque suaviza a borda e a expansão aumenta ou reduz toda a sombra antes de desfocar.
Para que serve o valor de expansão?
A expansão muda o tamanho da sombra antes de aplicar o desfoque. Um valor positivo deixa a sombra maior que o elemento, e um valor negativo a puxa para dentro, útil para sombras justas que aparecem só de um lado.
Posso empilhar mais de uma sombra?
Sim. Adicione quantas camadas quiser e cada uma vira uma sombra separada por vírgula na mesma regra box-shadow. Empilhar uma sombra larga e suave sob outra mais próxima e fechada é uma forma comum de dar profundidade realista.
O que é uma sombra interna?
Uma sombra interna é desenhada dentro do elemento em vez de atrás dele, então o box parece afundado ou rebaixado. Marque interna em qualquer camada para alternar, o que funciona bem em campos de formulário e botões pressionados.
Posso compartilhar esta ferramenta com meus dados preenchidos?
Sim. A URL é atualizada automaticamente enquanto você ajusta os controles. Copie da barra de endereço ou use o botão Compartilhar, e quem abrir verá sua sombra exata já pronta.
Ferramentas relacionadas
Calculadora de Proporção
Calcule a proporção, encontre a largura ou altura que falta e redimensione imagens e vídeos mantendo as mesmas proporções. Grátis.
Gerador de Código de Barras
Gere códigos de barras EAN-13 ou Code 128 online. Digite o número ou texto e baixe como SVG ou PNG. Grátis, sem cadastro.
Decodificador Base64
Decodifique strings Base64 para texto simples instantaneamente. Suporta saída Unicode completa com emojis. Decodificador Base64 gratuito.