Gradientes com ruído: cor suave com acabamento granulado

Um gradiente com ruído é uma mistura suave de cores com uma camada fina de ruído aleatório por cima, para que a cor pareça impressa e não gerada. A mistura dá-te a cor e a direção da luz; o ruído dá-te uma superfície e impede que a mistura se parta em bandas. Abaixo estão cinco receitas para copiar e depois uma explicação simples de cada definição do gerador, para fazeres as tuas.

Cinco receitas de gradiente com ruído

Cada receita é um gradiente de base e uma definição de ruído. Os gradientes aparecem aqui sem ruído para veres a cor; a tabela abaixo indica o ruído a juntar por cima. São deliberadamente diferentes entre si: um escuro, um claro, um quente, um frio, um ousado.

Definições de um gerador de gradiente com ruído explicadas

Todos os geradores de gradientes com opção de ruído, e todos os filtros de ruído SVG, usam alguma versão dos mesmos controlos. Quando souberes o que cada um faz, consegues ler qualquer receita e corrigir qualquer resultado.

Como fazer um gradiente com ruído em CSS

O método mais limpo sobrepõe uma imagem de ruído SVG ao teu gradiente numa só declaração background e depois mistura-os. Troca o gradiente por qualquer receita acima e define a frequência e a opacidade a partir da 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 aspeto mais ousado, quase de risografia, põe o ruído e o gradiente na mesma camada e passa-os por um filtro de contraste. O ruído é esmagado em pontos duros que seguem a luz do gradiente. É mais ruidoso do que a receita 3, por isso usa-o em cartazes e destaques de página, 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 */
}

Escolher o ruído certo para o formato

O ruído é relativo à tela. O mesmo filtro parece fino num story de telemóvel e grosso num pequeno banner, por isso escala a frequência ao formato em vez de reutilizares um só ficheiro em todo o lado.

• Stories e publicações: frequência à volta de 0,8, opacidade de 8 a 14 por cento. Um pouco mais do que pensas, porque o carregamento suaviza.
• Destaques de site: frequência de 0,7 a 0,9, opacidade de 4 a 10 por cento. Vê fundos de destaque para sites.
• Cartazes para impressão: grão mais grosso, frequência de 0,5 a 0,7 no tamanho final em píxeis, para sobreviver à impressão.
• Fundos escuros: reduz a quantidade habitual a metade. Fundos de gradiente escuros explica porque é que as sombras mostram o grão primeiro.

Gradiente com ruído ou gradiente granulado

É a mesma ideia com ênfase diferente. As pessoas dizem gradiente granulado quando falam do aspeto, e gradiente com ruído quando falam de como se faz. Gradientes granulados explica porque funciona o grão e onde o colocar; esta página é o livro de receitas. Se queres textura sem mistura de cores, começa antes por textura de grão.

Se preferires não afinar cursores de todo, cada Mark do Gradiently traz a sua própria definição de grão ao lado das cores, da luz e do movimento, gerada de novo em cada tamanho para que o ruído nunca se estique nem desfoque. Desenha de graça com qualquer Mark por reivindicar.