# Gradientes com ruído: cor suave com acabamento granulado

[Canonical HTML page](https://gradiently.design/pt-pt/guide/noise-background)

Os gradientes com ruído descrevem-se facilmente e acertam-se com dificuldade. Aqui ficam cinco receitas testadas, cada uma com as suas cores, as definições de ruído e o motivo por que funcionam, e o que cada cursor de um gerador realmente faz.

## The short version

- Um gradiente com ruído é uma mistura suave de cores com uma camada de ruído aleatório fino por cima, o que lhe dá um acabamento impresso e tátil e esconde as bandas.
- As duas definições que mais importam são a frequência do ruído, que controla o tamanho do grão, e a opacidade, que controla a intensidade com que se vê.
- Ruído fractal com uma frequência entre 0,6 e 0,9, misturado em Sobreposição ou Luz suave com 8 a 20 por cento de opacidade, serve para a maioria dos fundos de ecrã.
- Os gradientes escuros com ruído precisam de menos ruído do que os claros, porque o grão se vê mais nas sombras e nos meios-tons.
- Em CSS, o ruído pode desenhar-se com um filtro SVG `feTurbulence` embutido, por isso fica nítido em qualquer tamanho e não precisa de ficheiro de imagem.

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.

- 1. Violeta noturno: `radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%)`
- 2. Papel pêssego: `radial-gradient(circle at 25% 20%, #ffd9b8 0%, #f6c6c0 40%, #f3ece6 85%)`
- 3. Cartaz de pôr do sol: `linear-gradient(160deg, #ff7a3d 0%, #e5486f 50%, #5b2a86 100%)`
- 4. Lagoa profunda: `radial-gradient(ellipse at 30% 90%, #34d399 0%, #0f766e 40%, #06232a 85%)`
- 5. Azul limpo: `linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #93c5fd 100%)`

As cinco misturas de base, antes do ruído. Clica em qualquer uma para copiar o CSS.

| Receita | Frequência | Mistura | Opacidade | Porquê |
| --- | --- | --- | --- | --- |
| 1. Violeta noturno | 0,85, 3 oitavas | Sobreposição | 8% | Os tons escuros mostram o grão com facilidade, por isso mantém-no leve |
| 2. Papel pêssego | 0,65, 4 oitavas | Multiplicar | 10% | Multiplicar só escurece, por isso o fundo claro continua suave |
| 3. Cartaz de pôr do sol | 0,6, 3 oitavas | Sobreposição | 20% | A cor ousada suporta um grão mais pesado e grosso, como numa serigrafia |
| 4. Lagoa profunda | 0,9, 2 oitavas | Luz suave | 12% | O grão fino mantém uma mistura fria com ar limpo |
| 5. Azul limpo | 0,75, 3 oitavas | Luz suave | 14% | De azul a azul pálido cria bandas fortes; o ruído suaviza-o |

Definições de ruído para cada receita, com ruído fractal em monocromático. A frequência e as oitavas correspondem diretamente ao filtro SVG no código abaixo.

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

Todos os [geradores de gradientes](https://gradiently.design/pt-pt/guide/gradient-generator) 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.

| Definição | O que muda | Bom ponto de partida |
| --- | --- | --- |
| **Frequência** (escala, tamanho) | O tamanho do grão. Mais alta é mais fino, mais baixa é mais grosso. | 0,6 a 0,9 para ecrãs |
| **Oitavas** (detalhe) | Camadas de detalhe dentro do ruído. Mais parece mais rico e custa mais a desenhar. | 2 a 4 |
| **Tipo** | O ruído fractal é suave e nebuloso; a turbulência é mais nítida e com mais riscas. | Ruído fractal |
| **Cor** | O monocromático mantém a tua paleta exata; o ruído a cores acrescenta pontinhos de aspeto cinematográfico. | Monocromático |
| **Modo de mistura** | Como o ruído se mistura com a cor. A Sobreposição acrescenta contraste, a Luz suave é mais gentil, o Multiplicar só escurece. | Sobreposição ou Luz suave |
| **Opacidade** (quantidade) | A intensidade geral. | 8 a 20% |
| **Semente** | Que padrão aleatório obténs. Muda-a se vires um aglomerado de que não gostes. | Qualquer |

Os controlos por trás de todos os geradores de ruído, em palavras simples.

> **Avalia o ruído no tamanho final** O ruído que parece certo com zoom num portátil muitas vezes desaparece num telemóvel ou vira papa depois de carregado. Verifica a exportação no tamanho em que as pessoas a vão ver, no ecrã que vão usar.

## 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.

```css
.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;
}
```

A receita 1 em CSS. O ruído fica num pseudoelemento abaixo do conteúdo, por isso o texto continua nítido. `stitchTiles` faz o mosaico repetir-se sem juntas.

### 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.

```css
.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 */
}
```

O contraste esmaga o ruído suave em pontos, e o brilho forte empurra o resto para o branco. O Multiplicar assenta depois o resultado sobre um elemento pai colorido. Afina os dois valores do filtro em conjunto e mantém o texto numa camada separada por cima.

## 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.

Um story vertical de contagem decrescente sobre um fundo de gradiente violeta granulado

Um story de 1080×1920 vê-se de perto no telemóvel: mantém o ruído fino e bastante leve.

Um destaque largo de site com um título sobre um gradiente quente suavemente granulado

Um destaque de site de 1920×1080 enche um ecrã grande: baixa a opacidade, porque as áreas grandes tornam o ruído evidente.

- **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](https://gradiently.design/pt-pt/guide/website-hero-background).
- **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](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) 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](https://gradiently.design/pt-pt/guide/grainy-gradients) 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](https://gradiently.design/pt-pt/guide/textured-background).

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.

## FAQ

### O que é um gradiente com ruído?

Uma mistura suave de cores com uma camada fina de ruído aleatório por cima. O ruído dá-lhe um acabamento impresso e esconde as bandas.

### Que definições de ruído devo usar num gradiente?

Ruído fractal, monocromático, frequência de 0,6 a 0,9 e 2 a 4 oitavas, misturado em Sobreposição ou Luz suave com cerca de 8 a 20 por cento de opacidade.

### Como acrescento ruído a um gradiente em CSS?

Sobrepõe um SVG embutido com um filtro `feTurbulence` ao gradiente, num pseudoelemento, e define `mix-blend-mode: overlay` com opacidade baixa.

### Porque é que o meu gradiente com ruído fica desfocado depois de carregado?

As plataformas recomprimem as imagens e suavizam o detalhe fino. Exporta no tamanho exato da plataforma em PNG ou JPEG de alta qualidade e usa um pouco mais de ruído nas publicações sociais.

### Um gradiente com ruído é o mesmo que um gradiente granulado?

Na prática, sim. Granulado descreve o aspeto e ruído descreve o método usado para o fazer.