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%.
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.
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.
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.