All Tools / Ferramentas de Desenvolvedor / Gerador CSS Box Shadow — Editor Visual Gratuito
Prévia
Configurações
Deslocamento X 5px
Deslocamento Y 5px
Desfoque 15px
Expansão 0px
Cor
Opacidade 20%
Interno
Camadas
Código CSS 





        
        


        


        
        

            O CSS de sombra é gerado no seu navegador. Nada é enviado a um servidor.
            
        


    


    
    


        
Gerador CSS Box Shadow


        

            

                
O que esta ferramenta faz

                
Ajuste deslocamento X/Y, desfoque, expansão, cor e opacidade com controles deslizantes e veja a sombra atualizar em tempo real. Alterne Interno para sombras externas ou internas. Adicione múltiplas camadas para efeitos de profundidade. Aplique uma predefinição para começar rapidamente e copie o CSS com um clique.

            

            

                
Como usar

                
    
                    
  1. Escolha uma predefinição ou comece com o padrão.
    2. 
                    
  2. Ajuste os controles de deslocamento, desfoque, expansão e opacidade.
    3. 
                    
  3. Clique no swatch de cor para mudar a cor da sombra.
    4. 
                    
  4. Alterne Interno para sombras internas. Use + Adicionar Camada para profundidade.
    5. 
                    
  5. Clique em Copiar para copiar o CSS gerado.
    6.