Como Usar Gradientes CSS Modernos na Prática
Aprenda o básico das propriedades background-image para aplicar degradês espetaculares no design do seu site sem imagens.
Houve uma época em que, para ter um botão ou fundo de tela com duas cores se misturando, você precisava exportar fatias de imagens minúsculas do Photoshop.
Hoje, com a evolução do CSS3, gradientes complexos podem ser gerados por algumas simples linhas de código escrito diretamente no navegador.
Entendendo a Sintaxe
Apesar de serem cores de fundo, os gradientes no CSS são tratados como imagens. Portanto, a regra utilizada é a `background` (ou `background-image`).
A função `linear-gradient()` requer parâmetros: a direção ou ângulo da mistura e as "color stops" (os pontos de cor).
Exemplo de Linear e Radial
Um fundo linear que vai do topo à base seria: `background: linear-gradient(to bottom, #ff0000, #0000ff);`
Já o Radial parte de um centro: `background: radial-gradient(circle, #ffffff, #000000);`
Você pode combinar quantas cores quiser em uma única declaração.
A Vantagem do Gerador Visual
Apesar de parecer simples, escrever ângulos exatos em graus (como 135deg) e tentar imaginar a mistura das cores hexadecimais na mente é ineficiente.
Um gerador permite arrastar um "slider", ver o resultado na hora e pegar o código final.
Conclusão
Os gradientes deixaram de ser complicados. Eles agregam valor estético tremendo a custo de performance nulo (por não precisarem de download de imagem).
Experimente o nosso Gerador de Gradiente CSS e encontre a paleta certa para seu próximo projeto.