Gerador de Textura de Ruído

Continuar na ferramenta

Mais páginas desta ferramenta

noise overlay para dark mode

Noise Overlay para Dark Mode

Ruído demais em dark mode não parece textura, parece sujeira na tela, e o pior efeito colateral é reduzir o contraste entre texto e fundo justamente na paleta que já trabalha com menos luminância disponível. Esta página mostra a faixa de opacidade e o blend mode que mantêm o grão visível de perto e invisível na leitura normal.

Opacidade baixa é o que separa textura de mancha

O ruído em CSS ou SVG normalmente sai do filtro `feTurbulence`, definido no padrão de filtros do SVG, usando `type="fractalNoise"` para evitar as dobras marcantes que o modo `turbulence` produz; o atributo `baseFrequency` controla a escala do padrão, então um valor alto gera grão fino e denso, enquanto um valor baixo gera manchas maiores e mais suaves, mais parecidas com névoa do que com grão de filme.
Em fundo escuro, opacidade de camada entre 3% e 8% já é suficiente para o ruído quebrar a superfície plana sem competir com o texto por cima; acima disso o overlay começa a clarear pixels que deveriam ficar próximos do preto, reduzindo a razão de contraste exatamente no ponto que o WCAG exige no mínimo 4,5:1 para texto normal e 3:1 para texto grande.
O modo de mesclagem também importa tanto quanto a opacidade: `overlay` e `soft-light` tendem a preservar tom escuro porque escurecem onde já está escuro e clareiam só onde já está claro, enquanto `screen` sempre clareia, o que em dark mode empurra o fundo inteiro para um cinza mais claro do que o projetado.

Três combinações de camada escura

Fundo mono, contraste moderado

Entrada: palette: mono, contrast: 18
Saída esperada: Overlay de grão fino em cinza, opacidade próxima de 5%, blend soft-light

Contraste 18 fica na faixa média da ferramenta, suficiente para dar textura sem clarear o preto de base.

Card escuro com texto pequeno

Entrada: palette: mono, contrast: 8, blend: overlay
Saída esperada: Grão quase imperceptível sob leitura normal, visível só em zoom

Contraste baixo é a escolha certa quando o card carrega texto pequeno, porque sobra menos margem de contraste para gastar com o ruído.

Header escuro decorativo

Entrada: palette: mono, contrast: 30, blend: soft-light
Saída esperada: Grão perceptível a olho nu, textura de fundo claramente presente

Contraste 30 já é alto o bastante para notar a olho nu; funciona atrás de um título grande, mas não deveria ficar atrás de parágrafo corrido.

FAQ da ferramenta completa

Ruído SVG substitui uma imagem PNG?

Em muitos fundos, sim: o SVG mantém edição e escala sem perda. Mas texturas muito densas geram um markup grande, que pode ficar mais pesado que um bitmap otimizado, nesses casos, rasterizar em PNG/WebP pode compensar.

O que a seed controla?

O ruído prejudica a acessibilidade?

Quando usar textura na UI?

Por que exportar em SVG?

Mais contraste é sempre melhor?

A textura é aleatória de verdade?

A ferramenta funciona sem backend?

Perguntas frequentes

Qual opacidade máxima é segura em dark mode com texto pequeno?

Fique perto de 3% a 5%: texto pequeno já tem menos pixels de contorno por letra, então qualquer clareamento de fundo causado pelo ruído reduz a legibilidade mais rápido do que em título grande.

`overlay` ou `soft-light`, qual combina melhor com fundo escuro?

`soft-light` costuma dar resultado mais suave em dark mode porque a curva de contraste que aplica é menos agressiva; `overlay` tende a acentuar mais a diferença entre os tons já escuros e os pontos claros do ruído.

O ruído precisa cobrir a tela inteira ou só parte dela?

Cobrir só a área de cartão, seção ou header já entrega o efeito visual; aplicar em tela inteira multiplica o custo de renderização sem ganho perceptível, porque o padrão de ruído se repete de qualquer forma.

Como saber se o overlay já passou do ponto em dark mode?

Teste com o texto mais claro sobre o fundo mais escuro da paleta: se a leitura ficar cansativa em poucos segundos ou a razão de contraste medida cair abaixo de 4,5:1, a opacidade ou o contraste do ruído precisam baixar.

Próximos passos