Qual e a diferenca entre um gradiente linear e um radial?

Um gradiente linear mistura as cores ao longo de uma linha reta no angulo que voce define, enquanto um gradiente radial espalha as cores para fora a partir de um ponto central. Mude o tipo para ver cada um se atualizar na previa.

O controle deslizante de angulo funciona para gradientes radiais?

O controle deslizante de angulo controla a direcao de um gradiente linear. Nos gradientes radiais as cores se espalham a partir do centro, entao o angulo nao tem efeito visivel, mas os dois seletores de cor continuam valendo.

Como uso o CSS gerado no meu projeto?

Copie a regra gerada e cole na sua folha de estilo no elemento que quiser, por exemplo como uma propriedade background. Nenhuma biblioteca ou importacao extra e necessaria.

Gerador de Gradientes CSS

Tipo

Ângulo: 90deg

Cor 1

Cor 2

CSS

.element {
  background: linear-gradient(90deg, #2b59ff, #ff5e9c);
}

O que esta ferramenta faz

O Gerador de Gradientes CSS ajuda voce a criar um gradiente de duas cores e fornece o CSS exato para colar no seu projeto. E util para desenvolvedores frontend, designers e qualquer pessoa que esteja construindo uma landing page, um botao, um cartao ou uma secao hero e queira um fundo limpo sem escrever a sintaxe a mao. Voce ve o resultado enquanto o ajusta, entao nao ha duvida sobre como o gradiente final vai ficar.

Como usar

Escolha o tipo de gradiente, linear ou radial, para definir como as cores se misturam.
Arraste o controle deslizante de angulo para girar a direcao de um gradiente linear.
Selecione sua primeira cor com o seletor de cor.
Selecione sua segunda cor com o segundo seletor de cor.
Veja a previa ao vivo e o codigo CSS se atualizarem na hora conforme voce muda qualquer controle.
Copie a regra gerada, como uma linha background: linear-gradient(…), e cole na sua folha de estilo.

Um exemplo rapido

Defina o tipo como linear, arraste o angulo para 90 graus e entao escolha um roxo intenso e um azul suave. A previa mostra uma mistura da esquerda para a direita e o codigo lhe da algo como background: linear-gradient(90deg, #7c3aed, #60a5fa). Cole isso em um botao ou secao e pronto. Se um gradiente parecer sem graca, tente escolher duas cores mais distantes na roda de cores para obter mais contraste.

Tudo roda direto no seu navegador, entao suas cores permanecem privadas, nada e enviado e a ferramenta e totalmente gratuita e sem cadastro.

Perguntas frequentes

Qual e a diferenca entre um gradiente linear e um radial?: Um gradiente linear mistura as cores ao longo de uma linha reta no angulo que voce define, enquanto um gradiente radial espalha as cores para fora a partir de um ponto central. Mude o tipo para ver cada um se atualizar na previa.
O controle deslizante de angulo funciona para gradientes radiais?: O controle deslizante de angulo controla a direcao de um gradiente linear. Nos gradientes radiais as cores se espalham a partir do centro, entao o angulo nao tem efeito visivel, mas os dois seletores de cor continuam valendo.
Como uso o CSS gerado no meu projeto?: Copie a regra gerada e cole na sua folha de estilo no elemento que quiser, por exemplo como uma propriedade background. Nenhuma biblioteca ou importacao extra e necessaria.