Gerador de gradiente CSS
Projete gradientes de fundo CSS sem memorizar a sintaxe. Alterne entre os tipos linear e radial, defina um ângulo para gradientes lineares (graus) e escolha duas paradas de cor em 0% e 100%. A visualização é atualizada instantaneamente; copie o plano de fundo completo ou a declaração da imagem de plano de fundo em sua folha de estilo. Suporta entrada de cores HEX com validação.
Ângulo (°)
Cor 1
Cor 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 100%);
Como construir um gradiente
1. Escolha gradiente linear ou radial.
2. Para linear, defina o ângulo em graus (0 = de baixo para cima, 90 = da esquerda para a direita).
3. Digite as cores inicial e final (HEX).
4. Copie o CSS do cartão de resultado em seu projeto.
Exemplos de gradiente
Banner herói linear (135 graus)
Teal #6F9B96 a pêssego #E8C4B8 em 135° — uma diagonal comum em cabeçalhos de páginas de destino. Use como plano de fundo em uma seção de largura total.
Refletor radial
Tipo radial com centro claro e borda escura — simula uma vinheta: gradiente radial(círculo, #fff 0%, #333 100%).
Esmaecimento vertical (180 graus)
Ângulo 180 para desbotamento de cima para baixo da cor da marca para o branco - útil atrás das barras de navegação.
Quando usar esta ferramenta
• Quando você cria protótipos de planos de fundo da interface do usuário e quer feedback visual instantâneo.
• Quando você esquece se o ângulo de 90 graus é executado da esquerda para a direita ou de cima para baixo.
• Quando você precisa copiar e colar CSS para CodePen, Valores arbitrários do Tailwind ou transferência de design.
Quando escolher outra coisa
• Quando você precisar de mais de duas paradas de cores - estenda o CSS copiado manualmente ou use um aplicativo de design.
• Quando você quer gradientes cônicos (varredura) - não suportados aqui.
• Quando você precisa de variantes automáticas de modo escuro - duplique e ajuste as cores separadamente.
Paradas de cores em detalhes
Uma parada é a cor mais a posição opcional: #ff0000 0%, #0000ff 50%, #00ff00 100%. O navegador interpola RGB entre as paradas. As paradas intermediárias criam pores do sol em faixas ou listras multimarcas. Comece com duas paradas aqui, depois cole e anexe uma terceira parada no devtools até que pareça correta.
Ângulos de gradiente linear
CSS mede ângulos no sentido horário a partir de “para cima” (0 graus). Isso difere da aula de matemática, onde os ângulos geralmente começam da direita. Se um gradiente parecer girado incorretamente, adicione ou subtraia 90 graus. Use a edição ao vivo do devtools junto com este gerador para ajuste fino.
Desempenho e substitutos
Os gradientes são compatíveis com GPU em navegadores modernos. Para clientes muito antigos, defina um substituto de cor de fundo sólido para a cor de parada mais clara antes da linha de gradiente.
Perguntas frequentes
Qual é a sintaxe CSS para um gradiente linear?
background: linear-gradient(angle, color1 0%, color2 100%); O ângulo está em graus; as cores são paradas ao longo da linha.
Como funcionam as paradas de cores?
As paradas marcam onde cada cor fica na linha de gradiente. 0% é o começo, 100% é o fim. Esta ferramenta corrige duas paradas; adicione mais em seu editor, se necessário.
Linear vs. radial?
Mesclas lineares ao longo de uma linha reta. Radial se mistura para fora de um ponto central - bom para círculos e pontos fracos.
Quais valores de ângulo são comuns?
0 graus para cima, 90 graus para a direita, 180 graus para baixo, 135 graus na diagonal - comum para cartas e heróis.
Ele define o plano de fundo ou background-image?
A saída usa a abreviação de plano de fundo adequada para a maioria dos divs; você pode dividir em imagem de fundo se substituir outras camadas.
As cores são enviadas para um servidor?
Não. A visualização é renderizada localmente.
Isso é gratuito?
Sim, não é necessária nenhuma conta.