Gerador de gradiente CSS
Escolha duas cores, selecione um gradiente linear ou radial e ajuste o ângulo para ver uma pré-visualização ao vivo. O código CSS correspondente é gerado instantaneamente e fica pronto para copiar direto na sua folha de estilos.
background: linear-gradient(90deg, #ff9a00, #60acfc);Como funciona
Escolha suas duas cores com os seletores, selecione «linear» ou «radial» e, para gradientes lineares, arraste o controle de ângulo. A pré-visualização e o código CSS abaixo são atualizados instantaneamente a cada mudança.
Dica
Um ângulo de 90deg vai da esquerda para a direita, 180deg de cima para baixo, e 0deg de baixo para cima — experimente o controle deslizante para ver como a direção do gradiente muda.
Qual é a diferença entre linear e radial?
Um gradiente linear transita ao longo de uma linha reta no ângulo definido. Um gradiente radial se expande em círculo a partir do centro para fora, independentemente do ângulo.
Mais ferramentas nesta categoria
Calculadora de exposição
Encontre exposições fotográficas equivalentes entre abertura, velocidade do obturador e ISO.
Calculadora de proporção
Redimensione uma imagem ou vídeo proporcionalmente e encontre a proporção simplificada.
Verificador de contraste
Verifique se uma cor de primeiro plano e de fundo atendem às diretrizes de contraste WCAG.
Gerador de paleta de cores
Transforme qualquer cor base em paletas complementares, análogas e em tríade.
Conversor de formato de cor
Converta qualquer cor entre HEX, RGB, HSL e CMYK instantaneamente, com cópia em um clique para cada formato.
Gerador de escala tipográfica
Gere um conjunto harmonioso de tamanhos de fonte a partir de um tamanho base e uma proporção de escala, pronto para copiar como propriedades personalizadas CSS.