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

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

Degradês com ruído são fáceis de descrever e chatos de acertar. Aqui estão cinco receitas testadas, cada uma com suas cores, seus ajustes de ruído e o motivo de funcionarem, mais o que cada controle de um gerador realmente faz.

## The short version

- Um degradê 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 o banding.
- Os dois ajustes 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.
- Ruído fractal com frequência entre 0,6 e 0,9, misturado em Sobrepor ou Luz suave com 8 a 20 por cento de opacidade, serve para a maioria dos fundos de tela.
- Degradês escuros precisam de menos ruído que os claros, porque o grão é mais visível nas sombras e nos tons médios.
- Em CSS, o ruído pode ser desenhado por um filtro SVG `feTurbulence` embutido, então fica nítido em qualquer tamanho e não precisa de arquivo de imagem.

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.

- 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. Pôster 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 base, antes do ruído. Clique em qualquer uma para copiar o CSS.

| Receita | Frequência | Mistura | Opacidade | Por quê |
| --- | --- | --- | --- | --- |
| 1. Violeta noturno | 0,85, 3 oitavas | Sobrepor | 8% | Tons escuros mostram o grão com facilidade, então mantenha-o leve |
| 2. Papel pêssego | 0,65, 4 oitavas | Multiplicar | 10% | Multiplicar só escurece, então o fundo claro continua suave |
| 3. Pôster de pôr do sol | 0,6, 3 oitavas | Sobrepor | 20% | Cor ousada pede grão mais pesado e grosso, como numa serigrafia |
| 4. Lagoa profunda | 0,9, 2 oitavas | Luz suave | 12% | Grão fino mantém limpa uma mistura fria |
| 5. Azul limpo | 0,75, 3 oitavas | Luz suave | 14% | Azul para azul claro forma faixas feias; o ruído suaviza |

Ajustes de ruído de cada receita, usando ruído fractal em monocromático. Frequência e oitavas correspondem direto ao filtro SVG no código abaixo.

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

Todo [gerador de degradê](https://gradiently.design/pt-br/guide/gradient-generator) 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.

| Ajuste | 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 telas |
| **Oitavas** (detalhe) | Camadas de detalhe dentro do ruído. Mais fica mais rico e custa mais para desenhar. | 2 to 4 |
| **Tipo** | O ruído fractal é suave e nebuloso; a turbulência é mais nítida e riscada. | Ruído fractal |
| **Cor** | O monocromático mantém sua paleta exata; o ruído colorido acrescenta pontinhos de filme. | Monocromático |
| **Modo de mesclagem** | Como o ruído se mistura à cor. Sobrepor acrescenta contraste, Luz suave é mais gentil, Multiplicar só escurece. | Sobrepor ou Luz suave |
| **Opacidade** (quantidade) | A intensidade geral. | 8 to 20% |
| **Semente** | Qual padrão aleatório você recebe. Mude se vir um aglomerado de que não gosta. | Qualquer |

Os controles por trás de todo gerador de ruído, em palavras simples.

> **Avalie o ruído no tamanho final** O ruído que parece certo ampliado num notebook muitas vezes some no celular ou vira papa depois de um upload. Confira a exportação no tamanho em que as pessoas vão ver, na tela que vão usar.

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

```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, então o texto continua nítido. `stitchTiles` faz o ladrilho se repetir sem emendas.

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

```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 pontinhos, e o brilho forte empurra o resto para o branco. Multiplicar então aplica o resultado sobre um elemento pai colorido. Ajuste os dois valores do filtro juntos e mantenha o texto numa camada separada acima.

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

Um story vertical de contagem regressiva sobre um fundo degradê violeta granulado

Um story de 1080×1920 é visto de perto no celular: mantenha o ruído fino e razoavelmente leve.

Um hero de site largo com um título sobre um degradê quente suavemente granulado

Um hero de site de 1920×1080 preenche uma tela grande: reduza a opacidade, pois áreas grandes deixam o ruído óbvio.

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

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.

## FAQ

### O que é um degradê com ruído?

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

### Quais ajustes de ruído devo usar em um degradê?

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

### Como acrescento ruído a um degradê em CSS?

Sobreponha um SVG embutido com filtro `feTurbulence` ao degradê, num pseudoelemento, e defina `mix-blend-mode: overlay` com opacidade baixa.

### Por que meu degradê com ruído fica borrado depois do upload?

As plataformas recomprimem as imagens e suavizam o detalhe fino. Exporte no tamanho exato da plataforma em PNG ou JPEG de alta qualidade e use um pouco mais de ruído para posts de redes sociais.

### Degradê com ruído é o mesmo que degradê granulado?

Na prática, sim. Granulado descreve o visual e ruído descreve o método usado para obtê-lo.