A versão curta
- Um gradiente radial mistura a cor para fora a partir de um ponto central, em círculos ou elipses, em vez de ao longo de uma linha reta.
- Como o olhar vai para a zona mais clara, um gradiente radial funciona como um foco de luz que diz às pessoas para onde olhar primeiro.
- Os gradientes radiais mais úteis ficam fora do centro, por trás do motivo ou parcialmente fora do enquadramento, não mesmo no meio.
- Uma elipse segue a forma do seu contentor, enquanto um círculo mantém as proporções, o que conta em formatos altos e largos.
- Os brilhos radiais escuros criam bandas com facilidade, por isso dá-lhes espaço para esbater e junta um pouco de grão.
Nesta página
Um gradiente radial é uma transição que se espalha para fora a partir de um só ponto, em anéis, em vez de seguir numa direção. O centro tem uma cor e cada anel avança para a seguinte. Como os nossos olhos vão primeiro para a zona mais clara e mais saturada de uma imagem, um gradiente radial funciona como um foco de luz: decides onde cai a atenção e depois colocas lá o título, o produto ou o rosto.
Este guia é sobre usar gradientes radiais no design. Para a sintaxe completa, vê o radial-gradient() em CSS; para comparar com os lineares, cónicos e de malha, vê os tipos de gradientes.
O que um gradiente radial faz a uma composição
Um gradiente linear sugere direção: luz de cima, um horizonte, um varrimento. Um gradiente radial sugere uma fonte. Essa fonte torna-se o ponto focal natural, por isso tudo o que lá fica parece intencional e tudo o que fica nas margens parece secundário. É uma das formas mais simples de construir hierarquia visual sem juntar 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 é por predefinição uma elipse, esticada às proporções da sua caixa. Num banner largo, isso dá um brilho largo e achatado; num story alto, torna-se um oval alto. Um círculo mantém a mesma forma em qualquer tamanho, o que se lê mais como uma fonte de luz real.
Usa uma elipse quando queres que o brilho preencha o formato por igual, como numa vinheta. Usa um círculo quando o gradiente deve parecer um candeeiro, um sol ou uma auréola por trás de um único objeto.
Onde colocar o centro
Um brilho mesmo no centro de um quadrado é o gradiente radial mais comum e o menos interessante. Parece um alvo. Mover o centro muda todo o ambiente da peça.
- Por trás do motivo. Põe o brilho mesmo atrás de um produto ou de um retrato para o separar 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 enquadramento. Um centro abaixo ou ao lado da tela dá uma orla suave de luz, como um nascer do sol ou um candeeiro mesmo fora de campo.
- Longe do texto. Se o ponto mais claro fica por baixo de letra branca, o contraste cai exatamente onde mais precisas dele.
Quatro trabalhos que os gradientes radiais fazem bem
Foco de luz e atenção
Um centro claro sobre um fundo escuro aponta para o que estiver em cima dele. Serve fotografias de produto, cartazes de eventos e publicações de anúncio em que uma coisa importa.
Vinheta
O inverso: um meio mais claro que escurece para as margens. Uma vinheta subtil puxa o olhar para dentro e faz um fundo plano parecer fotografado. Mantém a mudança pequena, ou parece um filtro de máquina fotográfica antiga.
radial-gradient(ellipse at center, #f5efe6 0%, #efe4d3 55%, #cdb89a 100%)Brilho e auréola
Um círculo pequeno e saturado que esbate até ao transparente lê-se como luz a sair de alguma coisa: um letreiro néon, um ecrã, um ícone. Sobrepõe dois ou três destes em posições diferentes e estás a meio caminho de um gradiente aurora.
Campos de cor
Empilha vários gradientes radiais com bordas transparentes e fundem-se num campo suave e orgânico. É assim que se imita a maioria dos gradientes de malha em CSS.
.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 cartaz em que a zona iluminada fica por trás do título.
Um story com o texto mantido no campo calmo e mais escuro.
Decide qual dos dois trabalhos o brilho tem. Ou enquadra as palavras, com letra escura sobre o centro claro, ou enquadra o espaço ao lado das palavras, com letra clara sobre o contorno escuro. Os problemas começam quando a borda do brilho atravessa uma linha de texto, porque o contraste muda a meio. O texto sobre um gradiente explica melhor como encontrar a zona calma.
Problemas comuns dos gradientes radiais
Evita
- Um brilho centrado em todos os designs, como um alvo
- Um anel duro onde duas paragens ficam demasiado próximas
- Um brilho escuro que esbate numa distância curta e cria bandas
- Uma elipse esticada sem querer ao longo de um banner largo
Faz
- Coloca a fonte onde estaria o motivo ou a luz
- Espaça as paragens para a queda parecer luz real
- Dá aos brilhos escuros um esbatido longo e um pouco de grão
- Escolhe círculo ou elipse de propósito para cada formato
As bandas são o problema a vigiar. Um brilho de azul-marinho profundo a preto cobre muito poucos níveis de cor numa área grande, por isso cria degraus. Deixa o esbatido percorrer mais distância e junta grão, como se explica nas bandas em gradientes.
Perguntas frequentes
O que é um gradiente radial?
Um gradiente radial mistura as cores para fora a partir de um ponto central, em círculos ou elipses, em vez de ao longo de uma linha reta como um gradiente linear.
Qual é a diferença entre um gradiente radial em círculo e em elipse?
Uma elipse estica para acompanhar as proporções do seu contentor, enquanto um círculo mantém a mesma forma redonda em qualquer tamanho. Em CSS, a predefinição é a elipse.
Quando devo usar um gradiente radial em vez de um linear?
Usa um gradiente radial quando queres um ponto focal, um brilho ou uma vinheta. Usa um gradiente linear quando queres direção, como luz de cima ou um horizonte.
Porque é que o meu gradiente radial parece um alvo?
Provavelmente está centrado e com paragens muito próximas. Tira o centro do meio ou põe-no fora do enquadramento, e espaça as paragens para a luz esbater gradualmente.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
