Gerador de Box Shadow CSS

Crie sombras CSS (box-shadow) visualmente com preview ao vivo e controles de deslocamento, desfoque, espalhamento, cor, opacidade e inset.


  

  

    
    
  



    

    

      
Crie a sombra CSS perfeita de forma visual com este gerador gratuito. Arraste os controles de deslocamento horizontal e vertical, desfoque, espalhamento e opacidade, escolha a cor da sombra e ative o inset para sombras internas. O preview ao vivo é atualizado enquanto você ajusta, e você copia uma regra box-shadow limpa e pronta para usar — tudo no seu navegador, sem instalar nada.

      

        
O que é um gerador de box-shadow CSS?

        
Um gerador de box-shadow CSS é uma ferramenta visual que monta a propriedade box-shadow para você. Em vez de adivinhar valores em pixels, você ajusta deslocamento, desfoque, espalhamento, cor e opacidade com controles deslizantes e acompanha um preview ao vivo, depois copia o CSS exato da box-shadow para colar na sua folha de estilos.

        
      

      

        
Como gerar uma box-shadow

        
Use os controles para posicionar e suavizar a sombra, escolha sua cor e ative o inset para uma sombra interna. Quando o preview estiver do seu agrado, copie a regra CSS gerada.

        
  1. Defina o deslocamento horizontal e vertical para mover a sombra.
  2. Aumente o raio de desfoque para uma sombra mais suave ou o espalhamento para aumentá-la.
  3. Escolha a cor da sombra e ajuste a opacidade para mais sutileza.
  4. Ative o Inset se quiser uma sombra interna em vez de uma sombra externa.
  5. Clique em Copiar CSS para pegar a regra box-shadow pronta para usar.

      

      

        
Por que usar este gerador de box-shadow?

        
  • Preview ao vivo atualizado instantaneamente a cada ajuste.
  • Controle total sobre deslocamento, desfoque, espalhamento, cor e opacidade.
  • Opção de inset para sombras internas além das sombras externas.
  • Gera a cor em rgba() para que a opacidade fique embutida na sombra.
  • Um clique copia uma regra box-shadow limpa e pronta para colar.
  • 100% gratuito e privado — tudo roda no seu navegador.

      

      

        
Perguntas frequentes

        

          
O que significam os valores da box-shadow?

          
A propriedade box-shadow recebe deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de espalhamento e uma cor: box-shadow: x y desfoque espalhamento cor. Deslocamentos positivos empurram a sombra para a direita e para baixo, o desfoque suaviza a borda e o espalhamento aumenta ou reduz a sombra.

        

        

          
O que é uma sombra inset?

          
Adicionar a palavra-chave inset desenha a sombra dentro do elemento em vez de fora, criando um efeito interno ou afundado. Ative a opção Inset para adicioná-la ao CSS gerado.

        

        

          
Por que a cor é gerada em rgba()?

          
O controle de opacidade é aplicado pelo canal alfa de uma cor rgba(), então a cor da sombra e sua transparência viajam juntas em um único valor. Essa é a forma mais confiável de controlar a opacidade da sombra em CSS.

        

        

          
Posso adicionar mais de uma box-shadow?

          
Sim. Em CSS você pode aplicar várias sombras separando-as por vírgulas, por exemplo box-shadow: 0 1px 2px #0003, 0 4px 8px #0002. Esta ferramenta gera uma única sombra que você pode copiar e combinar conforme necessário.