Degradê com ruído: cor suave com acabamento granulado

Um degradê com ruído é uma mistura suave de cores com uma camada fina de ruído aleatório por cima, de modo que a cor pareça impressa e não renderizada. A mistura dá a cor e a direção da luz; o ruído dá uma superfície e impede que a mistura se quebre em faixas. Abaixo estão cinco receitas para copiar e depois uma explicação simples de cada ajuste do gerador, para você criar as suas.

Cinco receitas de degradê com ruído

Cada receita é um degradê base e um ajuste de ruído. Os degradês aparecem aqui sem ruído para você ver a cor; a tabela abaixo traz o ruído a acrescentar por cima. São de propósito diferentes entre si: um escuro, um claro, um quente, um frio, um ousado.

Ajustes de um gerador de degradê com ruído, explicados

Todo gerador de degradê com opção de ruído, e todo filtro de ruído SVG, usa alguma versão dos mesmos controles. Quando você sabe o que cada um faz, consegue ler qualquer receita e corrigir qualquer resultado.

Como fazer um degradê com ruído em CSS

O método mais limpo sobrepõe uma imagem de ruído SVG ao seu degradê numa única declaração background e depois as mescla. Troque o degradê por qualquer receita acima e defina a frequência e a opacidade pela tabela.

.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%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.08;
}

O método de pontilhado de alto contraste

Para um visual mais ousado, quase de risografia, ponha o ruído e o degradê na mesma camada e passe tudo por um filtro de contraste. O ruído é esmagado em pontos duros que seguem a luz do degradê. É mais forte que a receita 3, então use em pôsteres e banners hero, não atrás de texto corrido.

.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}

Escolhendo o ruído certo para o formato

O ruído é relativo ao canvas. O mesmo filtro parece fino num story de celular e grosso num banner pequeno, então escale a frequência para o formato em vez de reusar um arquivo em todo lugar.

• Stories e posts: frequência em torno de 0,8, opacidade de 8 a 14 por cento. Um pouco mais do que você imagina, porque o upload suaviza.
• Heros de site: frequência de 0,7 a 0,9, opacidade de 4 a 10 por cento. Veja fundos hero de site.
• Pôsteres para impressão: grão mais grosso, frequência de 0,5 a 0,7 no tamanho final em pixels, para sobreviver à gráfica.
• Fundos escuros: use metade da quantidade habitual. Fundos degradê escuros explica por que as sombras mostram o grão primeiro.

Degradê com ruído ou degradê granulado

É a mesma ideia com ênfases diferentes. As pessoas dizem degradê granulado quando falam do visual e degradê com ruído quando falam de como é feito. Degradês granulados explica por que o grão funciona e onde colocá-lo; esta página é o livro de receitas. Se você quer textura sem mistura de cores, comece por textura de grão.

Se você prefere nem mexer em controles, todo Mark do Gradiently traz o próprio ajuste de grão junto com suas cores, luz e movimento, renderizado de novo em cada tamanho para que o ruído nunca estique nem borre. Crie com qualquer Mark ainda não reservado, de graça.