Resumindo
- Um gradiente de malha é um gradiente em que vários pontos de cor se misturam entre si em duas dimensões, em vez de ao longo de uma linha ou a partir de um centro.
- Os gradientes de malha parecem orgânicos porque não têm uma direção única, então se leem como luz, água ou tinta, e não como geometria.
- O CSS não tem um tipo de gradiente de malha, mas empilhar gradientes radiais suaves sobre uma cor de base escura ou clara dá um resultado convincente.
- As duas falhas mais comuns são o barro, quando cores opostas se encontram e ficam cinzentas, e o banding, quando misturas sutis se quebram em faixas.
- Três a cinco cores de uma família próxima, uma cor de base e um pouco de grão bastam para a maioria dos gradientes de malha.
Nesta página
Um gradiente de malha é um gradiente construído a partir de vários pontos de cor espalhados por uma superfície, cada um se misturando com os vizinhos em todas as direções ao mesmo tempo. Um gradiente linear segue uma linha e um radial se espalha a partir de um centro; uma malha não tem um caminho único, então a cor se acumula, deriva e se sobrepõe como a luz através da água. É por isso que os gradientes de malha parecem orgânicos e se tornaram o visual padrão de seções de destaque, papéis de parede e capas de álbum.
Este guia explica como uma malha funciona, como criar uma em CSS e em ferramentas de design e como evitar as manchas cinzentas e as faixas que fazem tantas delas parecerem baratas. Para as outras formas, veja tipos de gradientes.
O que faz de um gradiente uma malha
Numa verdadeira malha de gradiente, como a do Adobe Illustrator, a superfície é dividida numa grade. Cada ponto da grade guarda uma cor, e o software mistura suavemente entre pontos vizinhos, curvando a grade para conduzir a cor. Os gradientes de forma livre dispensam a grade e deixam você pôr pontos de cor em qualquer lugar. Os gradientes de malha da web e das redes sociais costumam seguir um terceiro caminho: manchas suaves de cor postas sobre uma base e misturadas.
Os três compartilham uma ideia. A cor de cada pixel é uma mistura dos pontos de cor próximos, ponderada pela proximidade. Mova um ponto e só a vizinhança dele muda, o que faz uma malha parecer feita à mão, e não calculada.
Por que os gradientes de malha parecem orgânicos
Linear ou radial
- Uma direção ou um centro
- O olho segue a linha ou o alvo
- Parece projetado e geométrico
- Fácil de reconhecer como um preset
Malha
- Vários pontos de cor, sem direção única
- O olho passeia e descansa
- Parece luz, água ou tinta
- Cada arranjo é um pouco diferente
Essa qualidade de passeio também é o perigo. Sem estrutura, uma malha pode parecer um borrão aleatório. As boas têm composição: uma área clara onde o olho pousa primeiro, uma área mais escura que dá peso e uma área calma onde as palavras podem ficar.
Como criar um gradiente de malha em CSS
- 1
Defina uma cor de base
Escolha um fundo escuro ou claro. Ele aparece onde as poças de cor se desfazem, então decide o clima geral.
- 2
Posicione de três a cinco poças de cor
Cada poça é um
radial-gradientcentrado numa posição comat x% y%, esmaecendo atétransparent. Coloque-as perto de cantos e bordas, e não no meio. - 3
Deixe-as se sobrepor
Esmaeça cada poça entre 45% e 60% do caminho para que as vizinhas se encontrem. As sobreposições são onde a malha ganha riqueza.
- 4
Deixe uma zona calma
Mantenha uma área quase só na cor de base, geralmente onde vai o seu título. Veja texto sobre gradiente.
- 5
Acrescente grão
Uma camada leve de ruído esconde as faixas e dá profundidade. Gradientes granulados mostra o código.
.mesh {
background-color: #0b1026;
background-image:
radial-gradient(at 12% 18%, #7c3aed 0px, transparent 55%),
radial-gradient(at 88% 12%, #0ea5e9 0px, transparent 50%),
radial-gradient(at 80% 88%, #14b8a6 0px, transparent 55%),
radial-gradient(at 20% 92%, #f472b6 0px, transparent 45%);
}Como as poças são porcentagens, a malha se redimensiona com a sua caixa. Em formatos muito diferentes, como um story vertical e um banner largo, ajuste as posições de at para que a área clara ainda caia onde você quer. A mesma paleta pode ser animada devagar movendo essas posições; fundos de gradiente animados mostra como fazer isso sem prejudicar o desempenho.
Criando um gradiente de malha em ferramentas de design
Em ferramentas com uma malha de verdade ou um gradiente de forma livre, posicione os pontos de cor diretamente e arraste até a composição funcionar. Nas ferramentas sem isso, o método do desfoque funciona em todo lugar: desenhe de três a cinco formas suaves nas suas cores sobre um retângulo de base, desfoque-as bastante, muitas vezes um quarto da largura da tela ou mais, e deixe-as se sobrepor. Depois acrescente uma camada de grão por cima e exporte no tamanho final, em vez de ampliar.
Palavras postas direto sobre uma parte agitada da malha brigam com a cor.
A mesma malha com uma zona calma atrás das palavras se lê num relance.
Erros em gradientes de malha e como corrigi-los
| Problema | Por que acontece | Correção |
|---|---|---|
| Manchas cinzentas ou marrons | Cores opostas, como laranja e azul, se encontram e se anulam | Mantenha poças vizinhas próximas em matiz ou separe opostos com uma terceira cor. Veja gradientes barrentos |
| Faixas visíveis | Misturas grandes e sutis dão saltos entre os tons que uma tela consegue mostrar | Acrescente grão e evite compressão JPEG pesada. Veja banding em gradientes |
| Uma mancha no meio | Poças centradas na tela parecem um alvo | Empurre as poças para as bordas e os cantos |
| Ruído de arco-íris | Cores demais e sem relação | Três a cinco cores de uma família, mais um destaque |
| Sem lugar para as palavras | Cor espalhada por igual pela superfície inteira | Planeje uma zona calma antes de posicionar as poças |
Uma malha é tão boa quanto a sua paleta. Se você não sabe quais cores vão se misturar de forma limpa, comece com uma família de cores análogas e acrescente um destaque contrastante numa única poça.
GR·FVZ6·KW
Thin Dune
Ver este MarkSe você prefere descrever uma malha em vez de construí-la, a Forge cria novos Marks a partir de uma frase ou controle a controle, com até oito cores e três materiais empilhados.
Perguntas frequentes
O que é um gradiente de malha?
Um gradiente de malha mistura vários pontos de cor pela superfície em duas dimensões, de modo que a cor se acumula e se sobrepõe de forma orgânica, em vez de seguir uma linha ou um centro.
Dá para fazer um gradiente de malha em CSS?
Sim, por aproximação. Empilhe de três a cinco camadas de radial-gradient, cada uma esmaecendo até transparente, sobre uma cor de fundo de base.
Quantas cores um gradiente de malha deve ter?
De três a cinco cores mais uma base costuma funcionar melhor. Mais do que isso tende a parecer ruído de arco-íris, e não um campo composto.
Por que o meu gradiente de malha parece barrento?
Cores opostas estão se encontrando e se misturando em direção ao cinza. Mantenha as cores vizinhas próximas em matiz ou ponha uma cor de ligação entre as opostas.
Qual é a diferença entre um gradiente de malha e um gradiente de forma livre?
Uma malha de gradiente clássica guarda as cores numa grade de pontos que você pode curvar. Um gradiente de forma livre deixa você pôr pontos de cor em qualquer lugar, sem grade. Os dois se misturam em duas dimensões.
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
