Gerador de Gradiente CSS

Crie gradientes CSS lineares e radiais com pré-visualização ao vivo e copie o código.


  

  

    
    
  



    

    

      
Crie gradientes CSS lindos em segundos com este gerador de gradiente online e gratuito. Escolha duas cores, selecione linear ou radial, arraste o controle de ângulo e veja o gradiente atualizar ao vivo. Quando estiver do seu gosto, copie a propriedade background do CSS pronta para colar — tudo roda no seu navegador, sem nada para instalar.

      

        
O que é um gerador de gradiente CSS?

        
Um gerador de gradiente CSS é uma ferramenta visual que monta o valor linear-gradient() ou radial-gradient() que você coloca na propriedade background do CSS. Em vez de adivinhar pontos de cor e ângulos na mão, você escolhe as cores com um seletor, ajusta a direção e a ferramenta escreve o CSS exato para você, com uma pré-visualização ao vivo do resultado.

        
      

      

        
Como gerar um gradiente CSS

        
Escolha entre um gradiente linear (as cores se misturam ao longo de uma linha reta em um determinado ângulo) ou um gradiente radial (as cores se irradiam a partir do centro). Defina as cores inicial e final, ajuste o ângulo nos gradientes lineares e copie a regra de background gerada para a sua folha de estilo.

        
  1. Escolha a primeira e a segunda cor com as paletas, ou digite um código HEX.
  2. Selecione Linear ou Radial como tipo de gradiente.
  3. Arraste o controle de ângulo para definir a direção de um gradiente linear.
  4. Clique em Aleatório para inspiração instantânea e depois em Copiar CSS.

      

      

        
Por que usar este gerador de gradiente?

        
  • 100% gratuito, sem anúncios, cadastro ou limites.
  • A pré-visualização ao vivo atualiza na hora conforme você ajusta cores e ângulo.
  • Aceita gradientes CSS lineares e radiais.
  • Um clique copia uma regra de background pronta para colar.
  • Roda inteiramente no seu navegador — seu design nunca sai do seu dispositivo.

      

      

        
Perguntas frequentes

        

          
Qual é a diferença entre um gradiente linear e um radial?

          
Um gradiente linear mistura as cores ao longo de uma linha reta no ângulo escolhido, enquanto um gradiente radial mistura as cores para fora a partir de um ponto central, em formato circular. Use o seletor de tipo para alternar entre eles e comparar a pré-visualização.

        

        

          
Como uso o gradiente CSS gerado?

          
Copie a regra gerada e cole-a na propriedade background do elemento que você quer estilizar, por exemplo: background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);

        

        

          
Os gradientes CSS funcionam em todos os navegadores?

          
Sim. As funções padrão linear-gradient() e radial-gradient() são suportadas por todos os navegadores modernos, então o código que esta ferramenta gera funciona em todos eles, sem prefixos de fabricante.

        

        

          
Posso inserir códigos de cor HEX diretamente?

          
Sim. Você pode digitar um valor HEX como #4f46e5 em qualquer campo de cor, ou usar o seletor de cor para escolher visualmente. Atalhos de três dígitos como #f0c são expandidos automaticamente.