Resumindo
- Um gradiente radial mistura a cor a partir de um ponto central, em círculos ou elipses, em vez de seguir uma linha reta.
- Como o olhar vai para a área mais clara, um gradiente radial funciona como um holofote que diz às pessoas para onde olhar primeiro.
- Os gradientes radiais mais úteis ficam fora do centro, atrás do assunto ou parcialmente fora do quadro, e não bem no meio.
- Uma elipse acompanha o formato do seu contêiner, enquanto um círculo mantém as proporções, o que faz diferença em formatos altos e largos.
- Brilhos radiais escuros criam faixas com facilidade, então dê a eles espaço para desvanecer e acrescente um pouco de grão.
Nesta página
Um gradiente radial é uma mistura que se espalha a partir de um único ponto, em anéis, em vez de seguir numa direção. O centro tem uma cor e cada anel avança em direção à seguinte. Como os nossos olhos vão primeiro para a área mais clara e saturada de uma imagem, um gradiente radial age como um holofote: você decide onde a atenção cai e coloca ali o seu título, produto ou rosto.
Este guia é sobre usar gradientes radiais no design. Para a sintaxe completa, veja CSS radial-gradient(); para compará-lo com os gradientes lineares, cônicos e mesh, veja tipos de gradiente.
O que um gradiente radial faz com um layout
Um gradiente linear sugere direção: luz vinda de cima, um horizonte, uma varredura. Um gradiente radial sugere uma fonte. Essa fonte vira o ponto focal natural, então tudo o que é colocado sobre ela parece intencional e tudo o que fica nas bordas parece secundário. É uma das formas mais simples de criar hierarquia visual sem acrescentar uma única forma.
radial-gradient(circle at 50% 38%, #fde68a 0%, #f59e0b 14%, #7c2d12 42%, #1c0a05 78%)Círculo ou elipse
Em CSS, um gradiente radial é uma elipse por padrão, esticada nas proporções da sua caixa. Num banner largo, isso significa um brilho achatado e largo; num story alto, vira um oval alto. Um círculo mantém o mesmo formato em qualquer tamanho, o que parece mais uma fonte de luz real.
Use uma elipse quando quiser que o brilho preencha o formato por igual, como numa vinheta. Use um círculo quando o gradiente deve parecer uma lâmpada, um sol ou um halo atrás de um único objeto.
Onde colocar o centro
Um brilho bem no centro de um quadrado é o gradiente radial mais comum e o menos interessante. Parece um alvo. Mover o centro muda todo o clima da peça.
- Atrás do assunto. Coloque o brilho logo atrás de um produto ou retrato para separá-lo do fundo.
- Num terço. Colocar a fonte perto de um terço da largura ou da altura parece equilibrado sem ser estático.
- Fora do quadro. Um centro abaixo ou ao lado da tela cria uma borda suave de luz, como um nascer do sol ou uma lâmpada fora de cena.
- Longe do texto. Se o ponto mais claro fica sob letras brancas, o contraste cai exatamente onde você mais precisa dele.
Quatro trabalhos que os gradientes radiais fazem bem
Holofote e foco
Um centro claro sobre um fundo escuro aponta para o que estiver sobre ele. Combina com fotos de produto, pôsteres de evento e posts de anúncio em que uma coisa importa.
Vinheta
O inverso: um meio mais claro que escurece em direção às bordas. Uma vinheta sutil puxa o olhar para dentro e faz um fundo chapado parecer fotografado. Mantenha a mudança pequena, ou vai parecer um filtro de câmera antiga.
radial-gradient(ellipse at center, #f5efe6 0%, #efe4d3 55%, #cdb89a 100%)Brilho e halo
Um círculo pequeno e saturado que desvanece até o transparente parece luz saindo de algo: um letreiro neon, uma tela, um ícone. Sobreponha dois ou três em posições diferentes e você está a meio caminho de um gradiente aurora.
Campos de cor
Empilhe vários gradientes radiais com bordas transparentes e eles se misturam num campo suave e orgânico. É assim que a maioria dos gradientes mesh em CSS é simulada.
.poster {
background:
radial-gradient(circle at 20% 25%, rgb(244 114 182 / 0.85) 0%, transparent 45%),
radial-gradient(circle at 80% 30%, rgb(56 189 248 / 0.75) 0%, transparent 50%),
radial-gradient(circle at 50% 95%, rgb(250 204 21 / 0.7) 0%, transparent 55%),
#0f0a1f;
}Gradientes radiais com texto
Um pôster em que a área iluminada fica atrás do título.
Um story com o texto no campo calmo e mais escuro.
Decida qual dos dois trabalhos o brilho tem. Ou ele emoldura as palavras, com texto escuro sobre o centro claro, ou emoldura o espaço ao lado delas, com texto claro sobre o entorno escuro. O problema começa quando a borda do brilho corta uma linha de texto, porque o contraste muda no meio dela. O guia de texto sobre um gradiente mostra como encontrar a zona calma.
Problemas comuns com gradientes radiais
Evite
- Um brilho centralizado em todo design, como um alvo
- Um anel duro onde duas paradas ficam perto demais
- Um brilho escuro que desvanece numa distância curta e cria faixas
- Uma elipse esticada sem querer num banner largo
Faça
- Coloque a fonte onde estaria o assunto ou a luz
- Espalhe as paradas para que a queda pareça luz real
- Dê aos brilhos escuros um desvanecimento longo e um pouco de grão
- Escolha círculo ou elipse de propósito para cada formato
As faixas são o que merece atenção. Um brilho do azul-marinho profundo ao preto cobre pouquíssimos níveis de cor numa área grande, então cria degraus. Deixe o desvanecimento percorrer uma distância maior e acrescente grão, como explica o guia de banding em gradientes.
Perguntas frequentes
O que é um gradiente radial?
Um gradiente radial mistura as cores a partir de um ponto central, em círculos ou elipses, em vez de seguir uma linha reta como um gradiente linear.
Qual a diferença entre um gradiente radial em círculo e em elipse?
A elipse estica para acompanhar as proporções do contêiner, enquanto o círculo mantém a mesma forma redonda em qualquer tamanho. Em CSS, o padrão é a elipse.
Quando usar um gradiente radial em vez de um linear?
Use um gradiente radial quando quiser um ponto focal, um brilho ou uma vinheta. Use um gradiente linear quando quiser direção, como luz vinda de cima ou um horizonte.
Por que o meu gradiente radial parece um alvo?
Provavelmente está centralizado, com paradas muito próximas. Tire o centro do meio ou leve-o para fora do quadro e espalhe as paradas para que a luz desvaneça aos poucos.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
