Pular para o conteúdo

Gerador Box Shadow

Crie box-shadows CSS com controles visuais, múltiplas camadas, presets e preview em tempo real. Grátis.

Sem cadastro 100% gratuito Privado
Background: Shape:
Camada 1
5
5
15
0
35%
CSS 

    


    
    

        
Predefinições


        
        

            
            
            
            
            
            
            
            
        


        
        
Elevação Material Design

        


        
        
Neumorphism

        

    




    



        

    


        

            


    

        Esta ferramenta foi útil?
    

    

        
        
    

    



        




    

        

            

                

                    
Gerador de Box Shadow CSS
O Gerador de Box Shadow CSS é uma ferramenta visual online gratuita que permite criar e personalizar efeitos de sombra CSS em tempo real. Ajuste deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de expansão, cor da sombra e opacidade usando controles intuitivos, e veja o resultado renderizado instantaneamente em um elemento de preview. Quando estiver satisfeito com seu design, copie o código CSS gerado com um clique e cole diretamente na sua folha de estilos.O gerador suporta múltiplas sombras — você pode empilhar várias camadas de sombra no mesmo elemento para criar complexos efeitos de profundidade, bordas luminosas ou designs neumórficos. Cada camada é configurável independentemente com seu próprio deslocamento, desfoque, expansão, cor e opção inset. A ferramenta gera CSS compatível com todos os navegadores automaticamente, incluindo prefixos vendor para navegadores antigos quando necessário. O preview atualiza em tempo real enquanto você ajusta qualquer parâmetro.Web designers e desenvolvedores front-end usam esta ferramenta para prototipar rapidamente efeitos de sombra para cards e containers (elevação material design), botões (estados pressionado e hover), modais e diálogos (efeito flutuante), barras de navegação (separação sutil de profundidade) e elementos neumórficos (sombras suaves internas e externas). A abordagem visual elimina o tedioso processo de tentativa e erro de escrever valores de sombra CSS manualmente.O Gerador de Box Shadow CSS faz parte do conjunto facilita.tools de utilitários de desenvolvimento web gratuitos. Disponível em português, inglês e espanhol, otimizado para navegadores desktop e mobile.
                

                    

                        
                    

            

        

    

    

        

            
Perguntas Frequentes

            
    

            

                
                    O que e CSS box-shadow?
                    
                
                

                    
CSS box-shadow adiciona efeitos de sombra ao redor do quadro de um elemento. A sintaxe e: box-shadow: offset-x offset-y blur spread cor. Voce pode adicionar a palavra-chave 'inset' para sombras internas e empilhar multiplas sombras separadas por virgulas.

                

            

            

                
                    Como criar uma sombra sutil de card?
                    
                
                

                    
Uma sombra sutil comum e: box-shadow: 0 2px 8px rgba(0,0,0,0.1). Isso cria uma sombra suave abaixo do elemento com 8px de desfoque e 10% de opacidade. Para mais profundidade, adicione uma segunda camada: 0 4px 24px rgba(0,0,0,0.06).

                

            

            

                
                    Qual a diferenca entre blur e spread do box-shadow?
                    
                
                

                    
Blur controla o quao suave/difusa a sombra aparece (maior = mais suave). Spread controla o tamanho da sombra (positivo = maior, negativo = menor que o elemento). Uma sombra com 0 blur e spread positivo cria um efeito semelhante a borda solida.