DevToolPal
PT

Gerador de gradientes CSS

Crie gradientes CSS lineares, radiais e cônicos visualmente com paradas de cor, ângulo e posição, veja a prévia ao vivo, comece por predefinições e copie o CSS.

Roda localmente, nada é enviado

Gradiente

Tipo
Paradas de cor

Prévia

CSS

Predefinições
CSS do gradiente
 
 
 
 
 
O que faz


O gerador de gradientes CSS permite criar um gradiente visualmente e copiar o CSS final. Escolha um gradiente linear, radial ou cônico, adicione quantas paradas de cor quiser, arraste as posições, ajuste o ângulo ou o ponto central e a prévia é atualizada na hora. Você também pode colar um linear-gradient(…), radial-gradient(…) ou conic-gradient(…) existente para editá-lo visualmente. Tudo roda no seu navegador.


Como usar


    

  1. Comece por uma predefinição ou mantenha o gradiente de exemplo.
    2. 

  2. Escolha o Tipo. Gradientes lineares e cônicos têm ângulo; radiais e cônicos têm um centro que pode ser movido com Centro X e Centro Y.
    3. 

  3. Edite as Paradas de cor: troque a cor com o seletor ou digite qualquer cor CSS, arraste Posição para movê-la, use + Adicionar parada para inserir uma no maior intervalo e Inverter para inverter a ordem.
    4. 

  4. Ative Repetir para repetir o gradiente em mosaico e criar listras e anéis.
    5. 

  5. Copie o código do cartão CSS, se quiser com uma cor sólida de reserva para navegadores muito antigos.
    6. 



A caixa CSS do gradiente embaixo mostra o valor do gradiente e pode ser editada: cole um gradiente da sua folha de estilos ou de uma ferramenta de design e os controles o leem.


Exemplo


.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


Dicas para bons gradientes


    

  • Prefira o sutil. Dois tons vizinhos (azul para violeta, laranja para rosa) ficam mais suaves que cores opostas, que podem virar um cinza turvo no meio.
    • 

  • Adicione uma parada intermediária para controlar a mistura. Uma terceira parada um pouco mais clara que as vizinhas cria um brilho suave.
    • 

  • Paradas duras criam formas. Paradas na mesma posição geram bordas nítidas: listras, bandeiras, barras de progresso e gráficos de pizza usam esse truque.
    • 

  • Direções. to right equivale a 90deg e to bottom (o padrão) a 180deg. Os ângulos são contados no sentido horário a partir do topo.
    • 

  • Texto sobre gradientes precisa ficar legível em todo o gradiente. Compare as paradas mais clara e mais escura com a cor do texto em um verificador de contraste.
    • 

 
  
 
Perguntas frequentes
 
 
  › Qual a diferença entre gradientes lineares, radiais e cônicos?  
Um gradiente linear mistura as cores ao longo de uma linha reta em um ângulo. Um radial se espalha a partir de um ponto central em círculo ou elipse. Um cônico gira em torno de um ponto central como os ponteiros de um relógio, ótimo para rodas de cor e gráficos de pizza.
 
  › Como faço listras nítidas em vez de uma transição suave?  
Coloque duas paradas vizinhas na mesma posição, por exemplo red 50% e blue 50%. A cor muda de uma vez nesse ponto. Ative Repetir para repetir o padrão — é assim que se fazem listras em CSS.
 
  › Posso usar cores transparentes?  
Sim. Digite qualquer cor CSS em uma parada, incluindo rgba(), hsl() com alfa, hexadecimal de 8 dígitos ou transparent. O seletor de cor mantém o alfa definido e a prévia mostra um xadrez atrás das áreas transparentes.
 
  › Ainda preciso de prefixos ou de uma cor de reserva?  
Prefixos não são necessários: todos os navegadores atuais suportam gradientes lineares, radiais e cônicos sem prefixo. A cor sólida de reserva opcional só importa em navegadores muito antigos ou em ferramentas que leem background-color, como alguns clientes de e-mail.