Gerador de Gradiente CSS

Crie gradientes CSS lineares, radiais e cônicos visualmente. Adicione múltiplos pontos de cor e copie o CSS. Pré-visualize o resultado em tempo real.

Estúdio · ambiente neutro
90° 

  




  


  
  

  
  
  
  

    
Funcionalidades

    

      
      

        
        Linear / radial / conic
      

      
      

        
        Multiple color stops
      

      
      

        
        Angle / direction control
      

      
      

        
        Live preview & CSS code
      

      
    

  

  

  
  

    
Como Usar

    

      
        
        
1. Escolha o tipo de gradiente e o ângulo; a superfície mostra a prévia em tamanho real.

        
        
2. Arraste as alças para mover os pontos, clique em um espaço vazio da trilha para adicionar (até seis) ou faça o ajuste fino com os seletores de cor e campos de porcentagem.

        
        
3. Copie o CSS gerado — confira sobre o xadrez para detectar faixas em transparências.

        
      
    

  


  
  
  
  

    
Perguntas Frequentes

    
    

      What types of gradients does CSS support?
      
CSS supports linear, radial, and conic gradients, each with different visual effects.

    

    
  

  

  
  
  

    
Ferramentas Relacionadas

    

      
      
        

          
        

        
Gerador de Box Shadow CSS

        
Gere visualmente propriedades CSS box-shadow com controles deslizantes. Veja uma...

      
      
      
        

          
        

        
Gerador de Border Radius CSS

        
Crie CSS border-radius visualmente — controle os quatro cantos individualmente o...

      
      
      
        

          
        

        
Playground CSS Flexbox

        
Aprenda e experimente com CSS Flexbox. Ajuste as propriedades do contêiner e obs...

      
      
      
        

          
        

        
Gerador de CSS Grid

        
Crie layouts CSS Grid visualmente. Defina linhas, colunas, espaçamentos e copie ...