Resumindo
- Um gradiente com grão é uma mistura de cores com uma camada fina de ruído aleatório por cima, então a superfície parece texturizada e não perfeitamente lisa.
- O grão esconde o banding, porque a variação aleatória quebra os degraus visíveis entre os tons limitados que uma tela consegue mostrar.
- O grão faz a cor digital parecer física, lembrando filme, impressão em risografia e papel fosco.
- O grão deve ser mais sentido do que visto: comece sutil, confira em tamanho total e aumente só onde a superfície é grande e calma.
- Em CSS, o método usual é uma camada de ruído SVG feTurbulence posta sobre o gradiente com um modo de mistura e baixa opacidade.
Nesta página
Um gradiente com grão é um gradiente com uma camada fina de ruído aleatório por cima, então a cor tem uma textura visível em vez de uma superfície digital perfeitamente lisa. Ficou popular por um motivo prático e um visual: o grão esconde as listras que as misturas lisas costumam mostrar e faz a cor na tela parecer algo impresso, filmado ou pintado. Bem feito, a maioria das pessoas nem nota o grão. Só acha que a cor ficou melhor.
Por que o grão deixa um gradiente melhor
São três razões, e elas se somam.
- Esconde o banding. A maioria das imagens tem 256 tons por canal de cor. Uma mistura suave por uma área grande precisa passar de um a outro, e o olho enxerga os degraus como listras. O ruído aleatório espalha os pixels por tons vizinhos, e as bordas entre os degraus desaparecem. É a mesma ideia do dithering. Veja banding em gradientes.
- Dá tatilidade. As coisas físicas nunca são perfeitamente lisas. O filme tem grão, o papel tem aspereza e a tinta impressa se assenta de modo irregular. Um pouco de ruído toma emprestadas essas associações, e uma mistura digital chapada passa a parecer um material.
- Resiste melhor à compressão. As plataformas sociais e os apps de mensagem recomprimem imagens. Misturas lisas são exatamente o que a compressão pesada achata em blocos, e um grão fino dá ao codificador um detalhe em que se apoiar. Teste a sua exportação, porém: uma compressão muito forte também pode borrar o grão.
Em um Mark, o grão faz parte da receita, renderizado ao vivo junto com a cor.
Em um tamanho quadrado, o Mark é renderizado de novo para o formato, então o grão continua fino em vez de ser ampliado.
Quanto grão adicionar
O erro mais comum é usar demais. O grão pesado parece uma lente suja ou uma foto de celular com pouca luz. A quantidade certa depende do tamanho da área calma, de quão escuro é o gradiente e de onde ele será visto. Trate os números abaixo como pontos de partida para uma camada de ruído no modo de mistura Sobreposição ou Luz suave e depois julgue a olho, em tamanho total.
| Uso | Opacidade inicial | Tamanho do grão |
|---|---|---|
| Fundos de interface, atrás de texto corrido | Cerca de 5 a 10% | Fino |
| Posts sociais e seções hero | Cerca de 10 a 20% | De fino a médio |
| Cartazes, capas de álbum, visuais editoriais ousados | Cerca de 20 a 35% | De médio a grosso |
| Gradientes escuros propensos a banding | O bastante para esconder os degraus, e não mais | Fino |
Onde pôr o grão
O grão não precisa ser uniforme. Ele fica mais natural em áreas grandes e calmas de cor e em tons escuros, onde o grão de filme é mais visível na vida real. Mantenha-o mais leve atrás de texto pequeno, porque o ruído nas bordas das letras as deixa borradas. E deixe o logo e o texto acima da camada de grão, e não embaixo, para continuarem nítidos.
Evite
- Grão tão forte que parece sujeira ou pouca luz
- Grão sobre logos e texto pequeno
- Uma pequena imagem com grão ampliada, e o grão vira manchas
- Ruído colorido, salpicado de arco-íris, em uma paleta calma
Faça
- Um grão que você sente mais do que vê
- Texto e logos acima da camada de grão
- Grão renderizado ou repetido no tamanho final
- Ruído monocromático misturado às cores de baixo
Como adicionar grão a um gradiente em CSS
O método mais leve é um filtro de ruído SVG usado como imagem de fundo. O feTurbulence gera ruído aleatório, o feColorMatrix tira a cor dele para não salpicar e um modo de mistura o combina com o gradiente de baixo. Valores maiores de baseFrequency dão um grão mais fino; o stitchTiles faz o bloco se repetir sem emendas.
.grainy {
position: relative;
isolation: isolate;
background: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%);
}
.grainy::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: 0.18;
}z-index: -1 dentro de um pai isolado mantém o grão acima do gradiente e abaixo de qualquer texto.Se você prefere uma imagem, uma pequena imagem de ruído repetível salva em PNG funciona do mesmo jeito que o SVG. Mantenha-a sem perdas: blocos de ruído em JPEG pegam artefatos de compressão. Para mais padrões e truques de textura sem imagens, veja textura de ruído em CSS.
Como adicionar grão em ferramentas de design
- 1
Monte primeiro o gradiente
Acerte as cores, as paradas e a composição em uma camada limpa. O grão não salva uma mistura suja; veja gradientes sujos.
- 2
Adicione uma camada de ruído separada
Use o efeito de ruído da ferramenta ou uma textura de ruído em uma camada própria acima do gradiente, para poder ajustá-la sem tocar na cor.
- 3
Deixe-a monocromática
Dessature o ruído para não acrescentar pontinhos coloridos e depois ajuste a camada para Sobreposição ou Luz suave.
- 4
Baixe a opacidade até o grão sumir e depois volte um pouco
A quantidade certa costuma ficar um pouco acima do ponto em que você deixa de notá-lo.
- 5
Exporte no tamanho final, sem perdas se puder
Ampliar uma imagem com grão o transforma em manchas. Exporte em PNG no tamanho exato, ou em JPEG de alta qualidade para fotos.
Grão na impressão
O grão pensado para a tela de um celular pode se comportar de outro jeito no papel. A 300 dpi, um ruído muito fino pode sumir por completo, e um ruído grosso pode parecer defeito de impressão. Para cartazes e panfletos, faça o grão na resolução de impressão e teste na tiragem real. Como imprimir gradientes trata do resto do processo.
O grão é também um entre vários materiais. Papel, vidro e seda mudam o que um gradiente diz; textura em gradiente os compara. Todo Mark leva o seu próprio ajuste de grão junto com as cores e os materiais, então o equilíbrio já vem definido quando você começa a projetar.
Perguntas frequentes
O que é um gradiente com grão?
Um gradiente com grão é uma mistura de cores com uma camada fina de ruído aleatório por cima, então parece texturizado como filme ou impressão em vez de perfeitamente liso.
O grão corrige o banding em gradientes?
Em geral, sim. O ruído aleatório quebra as bordas duras entre os tons limitados que uma tela consegue mostrar, e as listras deixam de ser visíveis.
Como adicionar grão a um gradiente em CSS?
Sobreponha ao gradiente uma imagem de ruído SVG feTurbulence, dessature-a, defina mix-blend-mode: overlay e use uma opacidade baixa.
Quanto grão devo adicionar?
Menos do que você imagina. Comece baixo, confira em zoom de 100% no aparelho de destino e pare logo depois de o grão deixar de ser óbvio.
Por que meu grão parece manchado?
A imagem provavelmente foi ampliada depois de o grão ser adicionado. Adicione o grão no tamanho final da exportação ou use uma textura de ruído repetível.
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
