Como funciona a sintaxe de linear-gradient
A função linear-gradient descreve uma transição de cor em linha reta, e seu primeiro valor é a direção. Você pode dar um ângulo, em que 0deg aponta para cima, 90deg para a direita e 180deg para baixo, ou uma palavra-chave como to right. Depois vêm as paradas de cor (color stops): cada cor pode ter uma posição em porcentagem, como red 0% e blue 100%, indicando onde ela fica cheia. Cores sem posição se distribuem igualmente. Aproximar duas paradas cria uma transição mais brusca, e paradas coincidentes formam uma faixa sólida, o que permite até simular listras com um único gradiente.
Paradas de cor e transições nítidas
As paradas de cor definem onde cada cor do gradiente começa e termina, e controlá-las muda todo o efeito. Se duas cores estão em 0% e 100%, a transição é longa e suave; se você as coloca em 45% e 55%, a mistura acontece numa faixa estreita no meio. Colocar duas paradas na mesma posição, como red 50% e blue 50%, elimina a transição e cria uma divisão dura entre as cores, útil para faixas e padrões geométricos. Você também pode empilhar mais de duas cores, gerando um degradê com vários trechos. Ajustar as posições no preview é mais rápido do que calcular no código.
Gradiente CSS ou imagem de fundo
Um gradiente CSS quase sempre é melhor que uma imagem para fundos com transição de cor. Por ser desenhado pelo navegador a partir de texto, ele não gera uma requisição de rede, não pesa em kilobytes e fica nítido em qualquer resolução, inclusive em telas de alta densidade, sem borrar ao ampliar. Também é fácil de ajustar: mudar uma cor é editar uma linha de CSS, sem reexportar arquivo. Uma imagem só compensa para degradês muito complexos ou com textura que o CSS não reproduz. Para os casos comuns, como fundo de seção, botão ou cartão, o gradiente CSS carrega mais rápido e é mais flexível.
Como usar esta ferramenta
- Escolha entre gradiente linear ou radial.
- Ajuste as cores, as posições e o ângulo.
- Copie o CSS gerado e cole no seu projeto.
Perguntas Frequentes (FAQ)
- Qual a diferença entre gradiente linear e radial?
- O linear transita as cores em linha reta, na direção do ângulo escolhido. O radial parte de um ponto central e se espalha em círculo para fora.
- Posso usar o gradiente como fundo de um site?
- Sim. Basta colar a propriedade background gerada no elemento desejado. Gradientes CSS são leves e não usam imagem, então carregam rápido.
- O código funciona em todos os navegadores?
- Sim. linear-gradient e radial-gradient são suportados por todos os navegadores modernos, sem precisar de prefixos.
