Os resultados são fornecidos apenas para fins informativos e podem conter erros. Verifique de forma independente as informações importantes. O uso desta ferramenta é por sua conta e risco.
O que esta ferramenta faz
O Gerador de Gradientes CSS monta uma declaração background a partir de duas cores. Escolha Linear para mesclar as cores ao longo de uma linha em qualquer ângulo, ou Radial para espalhá-las do centro para fora em um círculo. A pré-visualização é atualizada enquanto você mexe nos controles, e a caixa de saída traz uma linha pronta para colar, como background: linear-gradient(90deg, #3b82f6, #8b5cf6);.
Em um gradiente linear, o ângulo define a direção: 0deg vai de baixo para cima, 90deg da esquerda para a direita e 180deg de cima para baixo. Um gradiente radial ignora o ângulo e usa circle, então a primeira cor fica no meio. As duas formas são suportadas em todos os navegadores atuais sem prefixos de fornecedor, então a linha gerada funciona do jeito que está.
Quando usar
- Dar a uma seção hero ou a um botão de call-to-action um fundo sutil em dois tons.
- Substituir uma imagem de fundo com gradiente por CSS, para a página carregar um arquivo a menos.
- Testar pares de cores da marca lado a lado antes de adotá-los em um design system.
- Criar um brilho radial suave atrás de um logo ou de uma ilustração.
Exemplo prático
Entrada
Tipo: linear
Ângulo: 90
Cores: #3b82f6, #8b5cf6Saída
background: linear-gradient(90deg, #3b82f6, #8b5cf6);Perguntas sobre esta ferramenta
Como adiciono uma terceira cor?
Acrescente-a à lista dentro da função, separada por vírgula: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899). Você também pode dar uma posição a cada cor, como #8b5cf6 40%, para controlar onde a mistura acontece.
O texto continua legível sobre um gradiente?
Confira a cor do texto contra as duas pontas do gradiente com o Verificador de Contraste de Cor. Se uma das pontas reprovar, escureça-a ou adicione uma camada semitransparente atrás do texto.
Posso usar um gradiente como borda ou preenchimento de texto?
Sim, com um pouco mais de CSS. Para texto, defina o gradiente como background e depois adicione background-clip: text e color: transparent. Para bordas, o border-image aceita a mesma função de gradiente.
Por que o meu gradiente mostra faixas visíveis?
O efeito de faixas (banding) aparece quando duas cores parecidas são esticadas por uma área grande. Escolha cores mais distantes entre si, reduza a área ou adicione uma parada intermediária para que cada passo seja menor.
Esta ferramenta é gratuita?
Sim, é grátis. Sem cadastro nem e-mail. Veja o resultado nesta página.
Como recebo o resultado?
Use a ferramenta nesta página. O resultado aparece aqui, sem envio por e-mail.