Gerador de Box Shadow com Pré-visualização ao Vivo
Este gerador de box shadow permite criar qualquer box-shadow do CSS de forma visual, sem decorar a sintaxe. Arraste os controles de offset, blur, spread e opacidade e veja a pré-visualização ao vivo se atualizar na hora, enquanto o código gerado fica pronto para copiar.
Foi feito para desenvolvedores front-end e designers que querem uma sombra caprichada rapidamente. Empilhe até 10 camadas de sombra independentes para dar profundidade realista, comece por 9 predefinições prontas como Elevated, Neumorph ou Material e ajuste a cor, a opacidade e o inset de cada camada até ficar do jeito certo.
Como Usar o Gerador de Box Shadow
Ajuste os controles da sombra
Defina Offset X e Offset Y para mover a sombra na horizontal e na vertical, depois use Blur para a suavidade da borda e Spread para aumentar ou reduzir o tamanho. Arraste o controle deslizante ou digite um valor exato no campo numérico ao lado.
Defina cor, opacidade e inset
Escolha uma Cor para a sombra e ajuste a opacidade de 0 a 100%. Acione o botão Inset para transformar uma sombra externa em interna e criar efeitos pressionados ou rebaixados.
Empilhe camadas ou aplique uma predefinição
Use Adicionar camada para empilhar até 10 sombras, selecione qualquer camada para editá-la e clique no ícone de olho para ocultar uma enquanto compara. Ou clique em uma predefinição como Soft ou Material para carregar um conjunto pronto e ajustar a partir dele.
Pré-visualize e copie o CSS
Mude as cores do Fundo e do Elemento e alterne a forma entre Arredondado, Quadrado e Círculo para testar em uma superfície real. Quando estiver do jeito certo, clique em Copiar para colocar a regra box-shadow completa na área de transferência.
Recursos
Controles Deslizantes Visuais
Offset X, Offset Y, Blur e Spread têm, cada um, um controle deslizante com um campo numérico ao lado, então você arrasta para agilidade ou digita para precisão.
Cor & Opacidade
Escolha qualquer cor para a sombra e defina sua opacidade de 0 a 100% para sombras sutis e naturais, em vez de um preto duro.
Botão Inset
Alterne qualquer camada entre sombra externa e interna para criar efeitos pressionados, rebaixados ou de campo de formulário.
Até 10 Camadas
Empilhe várias sombras com configurações independentes e depois adicione, remova ou oculte cada camada para montar uma profundidade realista em vários níveis.
9 Predefinições Prontas
Comece por Subtle, Elevated, Strong, Soft, Neon, Inset, Neumorph, Material ou Float e depois personalize para o seu design.
Pré-visualização Personalizável
Mude as cores do fundo e do elemento para testar sua sombra sobre a superfície onde ela vai realmente aparecer.
Formas de Pré-visualização
Alterne o elemento da pré-visualização entre Arredondado, Quadrado e Círculo para combinar com o componente de UI real que você está estilizando.
Pré-visualização ao Vivo em Tempo Real
A pré-visualização e o CSS gerado se atualizam no instante em que você muda qualquer valor, então não há adivinhação.
Cópia em Um Clique
A regra box-shadow completa, incluindo todas as camadas, é copiada para a área de transferência com um único clique.
Perguntas Frequentes
O que é a propriedade box-shadow do CSS?
O box-shadow adiciona uma sombra em volta de um elemento. Seus valores, em ordem, são o deslocamento horizontal, o deslocamento vertical, o raio de blur, o raio de spread e a cor, com a palavra-chave opcional inset. Este gerador monta exatamente essa string para você a partir dos controles deslizantes.
O que significam os valores de offset, blur e spread?
Offset X move a sombra para a esquerda ou para a direita, Offset Y a move para cima ou para baixo, Blur controla o quão suave é a borda (0 deixa a borda nítida) e Spread aumenta a sombra com valores positivos ou a encolhe com valores negativos.
O que faz a opção inset do box-shadow?
O botão Inset muda uma sombra de externa para interna. As sombras internas ficam dentro do elemento para criar um visual pressionado ou rebaixado, comum em campos de formulário e botões ativos.
Como adiciono várias sombras (box shadow)?
Clique em Adicionar camada para empilhar uma nova sombra sobre a atual, até 10 camadas no total. Cada camada mantém seu próprio offset, blur, spread, cor, opacidade e inset, e o gerador junta tudo em uma única regra box-shadow separada por vírgulas.
Como faço uma sombra suave e sutil?
Use opacidade baixa (por volta de 10 a 25%), evite o preto puro e sobreponha duas ou três sombras leves em vez de uma forte. As predefinições Soft e Elevated são feitas exatamente assim e servem como um bom ponto de partida.
Posso usar sombras coloridas em vez de pretas?
Sim. Abra o seletor de cor e escolha qualquer tom que combine com sua paleta; sombras coloridas costumam parecer mais ricas do que o preto comum. A predefinição Neon mostra um brilho colorido feito com spread e um tom vivo.
O CSS gerado é compatível com todos os navegadores?
Sim. O box-shadow é suportado por todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge, e não precisa de prefixos de fornecedor, então você pode colar a saída direto na sua folha de estilos.
Ainda não há comentários. Seja o primeiro a comentar!