Gerador de gradientes CSS

Crie um gradiente linear em CSS escolhendo duas cores e o ângulo da transição, com pré-visualização em tempo real e código pronto a copiar.

É processado no seu dispositivo. Nada é enviado para nenhum servidor.

Cor 1

Cor 2

Ângulo

background: linear-gradient(135deg, #0B6E63, #55BFAF);

Gera a função CSS linear-gradient() com as cores e o ângulo indicados, compatível com todos os navegadores modernos.

Casos de uso

1
Escolha duas cores
Selecione a cor inicial e a cor final do gradiente.
2
Ajuste o ângulo
Defina a direção do gradiente em graus.
3
Copie o CSS
Copie a propriedade background pronta a colar na folha de estilos.

O ângulo segue a convenção do CSS: 0° vai de baixo para cima, 90° da esquerda para a direita e 180° de cima para baixo.
Nos campos de cor vale qualquer cor CSS: HEX, rgb(), rgba() com transparência, hsl() ou nomes como «tomato».
O código é entregue como propriedade background completa. Se uma cor não for válida, a pré-visualização não aparece: verifique esse campo.

Só gera gradientes lineares?

Sim, a ferramenta gera linear-gradient(); os gradientes radiais ou cónicos não estão incluídos.