A versão curta
- 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, por isso leem-se como luz, água ou tinta e não como geometria.
- O CSS não tem um tipo de gradiente de malha, mas sobrepor gradientes radiais suaves sobre uma cor de base escura ou clara dá um resultado convincente.
- As duas falhas mais comuns são o turvo, quando cores opostas se encontram e ficam cinzentas, e as faixas, quando misturas subtis se partem em riscas.
- Três a cinco cores de uma família próxima, uma cor de base e um pouco de grão chegam 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 a misturar-se com os vizinhos em todas as direções ao mesmo tempo. Um gradiente linear avança ao longo de uma linha e um gradiente radial espalha-se a partir de um centro; uma malha não tem um caminho único, por isso a cor acumula-se, desliza e sobrepõe-se como luz através da água. É por isso que os gradientes de malha parecem orgânicos, e é por isso que se tornaram o visual por omissão de secções de destaque, fundos de ecrã e capas de álbuns.
Este guia explica como funciona uma malha, como fazer uma em CSS e em ferramentas de design e como evitar as manchas cinzentas e as riscas que fazem tantas parecerem baratas. Para as outras formas, vê 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 grelha. Cada ponto da grelha tem uma cor, e o programa mistura suavemente os pontos vizinhos, dobrando a grelha para conduzir a cor. Os gradientes de forma livre dispensam a grelha e deixam-te colocar pontos de cor em qualquer sítio. Os gradientes de malha na web e nas redes sociais seguem normalmente um terceiro caminho: manchas suaves de cor pousadas sobre uma base e misturadas entre si.
Os três partilham uma ideia. A cor de cada píxel é uma mistura dos pontos de cor próximos, pesada pela distância a que estão. Move um ponto e só a sua vizinhança muda, e é isso que permite a uma malha parecer feita à mão e não calculada.
Porque é 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 desenhado e geométrico
- Fácil de reconhecer como predefinição
Malha
- Vários pontos de cor, sem direção única
- O olho vagueia e descansa
- Parece luz, água ou tinta
- Cada disposição é ligeiramente diferente
Essa qualidade errante também é o perigo. Sem estrutura, uma malha pode parecer um borrão ao acaso. As boas têm composição: uma zona clara onde o olho pousa primeiro, uma zona mais escura que lhe dá peso e uma zona calma onde as palavras podem ficar.
Como fazer um gradiente de malha em CSS
- 1
Define uma cor de base
Escolhe um fundo escuro ou claro. Aparece onde quer que as poças de cor se desvaneçam, por isso decide o ambiente geral.
- 2
Coloca três a cinco poças de cor
Cada poça é um
radial-gradientcentrado numa posição comat x% y%, a desvanecer paratransparent. Põe-nas perto dos cantos e das margens em vez de ao meio. - 3
Deixa-as sobrepor-se
Desvanece cada poça entre 45% e 60% do caminho para que as vizinhas se encontrem. É nas sobreposições que a malha ganha riqueza.
- 4
Deixa uma zona calma
Mantém uma área quase só com a cor de base, normalmente onde vai ficar o título. Vê texto sobre gradiente.
- 5
Acrescenta grão
Uma camada leve de ruído esconde as riscas e acrescenta profundidade. Gradientes com grão 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 estão em percentagens, a malha ajusta-se à sua caixa. Em formas muito diferentes, como uma story alta e um banner largo, ajusta as posições at para que a zona clara continue a cair onde queres. A mesma paleta pode ser animada lentamente movendo essas posições; fundos em gradiente animado explica como o fazer sem prejudicar o desempenho.
Fazer um gradiente de malha em ferramentas de design
Nas ferramentas com um verdadeiro gradiente de malha ou de forma livre, coloca os pontos de cor diretamente e arrasta-os até a composição funcionar. Nas que não o têm, o método do desfoque funciona em todo o lado: desenha três a cinco formas suaves nas tuas cores sobre um retângulo de base, desfoca-as muito, muitas vezes em um quarto da largura da tela ou mais, e deixa-as sobrepor-se. Depois acrescenta uma camada de grão por cima e exporta no tamanho final em vez de ampliar.
Palavras pousadas diretamente sobre uma parte agitada da malha lutam com a cor.
A mesma malha com uma zona calma por trás das palavras lê-se num relance.
Erros nos gradientes de malha e como os corrigir
| Problema | Porque acontece | Solução |
|---|---|---|
| Manchas cinzentas ou castanhas | Cores opostas, como laranja e azul, encontram-se e anulam-se | Mantém as poças vizinhas próximas no tom, ou separa as opostas com uma terceira cor. Vê gradientes turvos |
| Riscas visíveis | Misturas grandes e subtis avançam aos saltos entre os tons que um ecrã consegue mostrar | Acrescenta grão e evita compressão JPEG forte. Vê faixas em gradientes |
| Uma mancha ao meio | Poças centradas na tela parecem um alvo | Empurra as poças para as margens e os cantos |
| Ruído arco-íris | Demasiadas cores sem relação | Três a cinco cores de uma família mais um acento |
| Sem lugar para palavras | Cor espalhada por igual em toda a superfície | Planeia uma zona calma antes de colocares as poças |
Uma malha só é tão boa como a sua paleta. Se não tens a certeza de que cores se misturam bem, começa por uma família de cores análogas e acrescenta um acento contrastante numa única poça.
GR·FVZ6·KW
Thin Dune
Ver este MarkSe preferires descrever uma malha em vez de a construir, a Forge cria Marks novos a partir de uma frase ou controlo a controlo, com até oito cores e três materiais sobrepostos.
Perguntas frequentes
O que é um gradiente de malha?
Um gradiente de malha mistura vários pontos de cor numa superfície em duas dimensões, para que a cor se acumule e sobreponha de forma orgânica em vez de seguir uma linha ou um centro.
É possível fazer um gradiente de malha em CSS?
Sim, por aproximação. Sobrepõe três a cinco camadas de radial-gradient, cada uma a desvanecer para transparente, sobre uma cor de fundo de base.
Quantas cores deve ter um gradiente de malha?
Três a cinco cores mais uma base costuma funcionar melhor. Mais do que isso tende a parecer ruído arco-íris em vez de um campo composto.
Porque é que o meu gradiente de malha parece turvo?
Há cores opostas a encontrar-se e a misturar-se em direção ao cinzento. Mantém as cores vizinhas próximas no tom, ou põe 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 grelha de pontos que podes dobrar. Um gradiente de forma livre deixa-te colocar pontos de cor em qualquer sítio, sem grelha. Ambos misturam em duas dimensões.
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
