Como usar
- Escolha linear, radial ou cônico e defina o ângulo ou a posição do centro.
- Defina a cor, a opacidade e a posição de cada parada. Adicione até seis paradas ou remova as que não precisar.
- Confira a prévia e copie a linha CSS para sua folha de estilos.
Como funciona
O resultado é uma declaração CSS padrão de background. Os gradientes lineares seguem um ângulo: 0deg vai de baixo para cima, 90deg vai da esquerda para a direita e 180deg vai de cima para baixo. Os gradientes radiais se espalham a partir de um ponto central, como um círculo ou uma elipse que se ajusta à caixa. Os gradientes cônicos giram em torno de um ponto central, começando no ângulo escolhido. São úteis para criar efeitos semelhantes a gráficos de pizza e rodas de cores.
As paradas são escritas na ordem de suas posições, que podem ser ajustadas livremente arrastando-as. Uma parada com opacidade reduzida é escrita como rgba(), permitindo que o fundo apareça através dela. Duas paradas na mesma posição criam uma borda definida, em vez de uma transição suave; é assim que se formam listras.
As três funções de gradiente funcionam em todos os navegadores atuais. Por padrão, os gradientes fazem a transição no espaço de cores sRGB, o que pode deixar um tom levemente acinzentado entre cores complementares (por exemplo, azul e amarelo). Adicionar uma parada intermediária com uma cor mais vibrante evita isso.
Exemplos
Fundo discreto para cabeçalho
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) cria uma transição suave de cima para baixo, mantendo o texto escuro legível.
Listras com bordas definidas
Use quatro paradas: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. As duas paradas em 50% se encontram sem transição, formando duas metades de cor sólida.
Efeito de foco de luz
Um gradiente radial (círculo no canto superior esquerdo) de rgba(255, 255, 255, 0.6) a rgba(255, 255, 255, 0), sobreposto a uma cor, cria uma iluminação suave no canto.
Perguntas frequentes
Em que direção vai 0deg?
No CSS, 0deg aponta para cima, então o gradiente começa embaixo e termina em cima. 90deg vai da esquerda para a direita. Isso é diferente de alguns aplicativos de design, nos quais 0° geralmente indica a direção da esquerda para a direita.
Posso aplicar o gradiente ao texto?
Sim: aplique o fundo e, em seguida, adicione background-clip: text e color: transparent. Verifique se o texto continua legível sobre a página em todos os pontos do gradiente.
Preciso de prefixos de fornecedor, como -webkit-linear-gradient?
Não. Os navegadores atuais oferecem suporte à sintaxe sem prefixo. Prefixos só são necessários para navegadores muito antigos.
Privacidade
Tudo é gerado no seu navegador. Suas cores e configurações não são enviadas nem armazenadas.