Como gerar um gradiente CSS linear ou radial com duas cores

Para que serve o gerador de gradientes

O Gradient Generator serve para criar texto CSS de gradientes lineares ou radiais a partir de duas cores e, no caso do gradiente linear, de um ângulo opcional. É útil quando precisa de uma declaração CSS pronta para adaptar ao fundo de um elemento, a um protótipo ou a uma folha de estilos.

Pode trabalhar com os valores predefinidos ou substituí-los pelas cores do seu projeto. O resultado depende dos valores introduzidos: as cores são colocadas no texto CSS gerado sem uma validação autónoma que confirme se correspondem a cores CSS válidas.

Como gerar o gradiente CSS

1. Abra a ferramenta e localize os controlos destinados às duas cores. Se não preencher o primeiro campo, é usado #ff6b6b; se não preencher o segundo, é usado #4ecdc4.

2. Introduza a primeira cor e a segunda cor que pretende usar. Pode fornecer valores como códigos hexadecimais, mas confirme por si próprio se o formato escolhido é aceite pelo CSS, porque a ferramenta insere o texto fornecido sem uma etapa separada de validação.

3. Escolha o tipo de gradiente. Para uma faixa que progride numa direção, selecione linear. Para um gradiente circular, selecione o valor radial.

4. Se estiver a criar um gradiente linear, indique o ângulo em graus. Quando o campo fica vazio, o valor usado é 45 graus. O ângulo é convertido para um número inteiro e ajustado para o intervalo de uma volta; se não puder ser convertido, é aplicado o valor de recurso de 45 graus.

5. Execute a geração e leia o texto CSS apresentado. Num gradiente linear, o texto usa o ângulo e as duas cores fornecidas. Num gradiente radial, o valor radial produz uma forma radial circular com essas duas cores.

6. Reveja o resultado antes de o colocar no seu ficheiro CSS. Se tiver escolhido um tipo diferente de linear ou radial, a ferramenta usa o formato linear, embora o valor de tipo introduzido continue associado aos dados devolvidos.

Como interpretar o resultado

O resultado é texto CSS para um gradiente, não uma imagem pronta. Num resultado linear, procure a indicação do ângulo em graus e as duas cores na declaração. Num resultado radial, espere uma forma circular baseada nas mesmas cores. Assim, pode avaliar rapidamente se o tipo escolhido e a direção pretendida correspondem ao seu design.

Por exemplo, suponha que introduz #264653 e #e9c46a, escolhe linear e indica 135. O resultado deverá ter a forma de uma declaração CSS de gradiente linear que inclui 135deg e os dois valores de cor. Se trocar o tipo para radial, o resultado deverá assumir a forma de uma declaração CSS radial circular com #264653 e #e9c46a.

Se o resultado parecer inesperado, confirme primeiro os campos introduzidos e o tipo selecionado. Um ângulo como 405 é reduzido para o equivalente dentro de 360 graus, enquanto um valor que não possa ser convertido volta a 45 graus. Um tipo personalizado não cria um terceiro formato: segue o formato linear. Estas regras ajudam a distinguir um resultado calculado pela ferramenta de um problema no valor que foi introduzido.

Exemplo prático

Está a preparar um fundo com tons escuros e quentes e quer comparar uma transição diagonal com uma transição radial.

Introduza #264653 como primeira cor, #e9c46a como segunda cor, selecione linear e indique 135 graus. Depois, altere o tipo para radial para comparar a forma do texto CSS gerado.

Uma declaração CSS de gradiente linear que inclui 135deg, #264653 e #e9c46a; ao selecionar radial, uma declaração CSS radial circular com as mesmas duas cores.

Limitações

• As cores são inseridas no texto CSS sem validação separada, e os tipos diferentes de linear e radial recorrem ao formato linear.

Erros comuns

• Escolher um tipo com um nome diferente de linear ou radial e assumir que será criado um formato novo. Se precisa de um gradiente radial, use o valor radial; reveja também as cores, porque são inseridas no CSS sem validação separada.

Perguntas frequentes

Posso gerar um gradiente radial?

Sim, pode escolher o valor radial para obter um gradiente radial circular com as duas cores fornecidas. O valor linear produz o formato linear.

O que acontece se não indicar um ângulo válido?

Se o ângulo ficar vazio, é usado 45 graus. Se o valor não puder ser convertido, também é aplicado 45; os valores numéricos são convertidos para inteiro e reduzidos modulo 360.

Posso escrever um tipo de gradiente personalizado?

Não. Valores diferentes de linear e radial recorrem ao formato linear. Para obter a forma radial, selecione o valor radial.