Softonic

Gerador de textura de ruído

Etapa 1 / 2
Próximo

Uma pitada de ruído disfarça o banding, suaviza os preenchimentos de cor chapada e faz os gradientes da interface parecerem menos estéreis. Este gerador cria uma textura de ruído quadrada que se repete sem emendas usando o filtro SVG feTurbulence, com controles de cor de fundo, opacidade do ruído, frequência do grão e tipo de ruído, e devolve o CSS já montado: uma cor de fundo mais um data URI de SVG embutido para colar direto na sua folha de estilos.

Como gerar uma textura de ruído

  1. 1

    Escolha a cor de fundo

    O grão fica por cima dessa cor, então comece pela superfície que você realmente vai usar.

  2. 2

    Defina a opacidade

    De quase imperceptível (2-5%) a um grão de filme forte (25% ou mais). Em interfaces, o discreto quase sempre vence.

  3. 3

    Ajuste a frequência

    Uma frequência base mais alta gera grão fino e denso; uma mais baixa produz manchas maiores e mais suaves.

  4. 4

    Escolha o tipo de ruído

    O ruído fractal é suave e natural. A turbulência tem mais contraste e aparência de nuvens.

  5. 5

    Copie o CSS

    A saída é uma cor de fundo mais um data URI de SVG embutido, pronto para colar na sua folha de estilos.

Ruído em SVG com feTurbulence

A forma mais enxuta de entregar ruído é SVG somado a um filtro de turbulência:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

Insira em linha como background-image: url("data:image/svg+xml,...") e você terá algumas centenas de bytes de marcação que se repetem em qualquer superfície, sem nenhuma requisição HTTP extra.

Configurações recomendadas por caso de uso

Caso de uso Opacidade Frequência base Tipo de ruído
Painéis de interface no modo escuro 3-5% 0,8-1,0 Ruído fractal
Camada sobre o gradiente da seção principal 5-10% 0,7-0,9 Ruído fractal
Cartão com textura de papel 8-15% 0,6-0,8 Ruído fractal
Visual de foto com grão de filme 15-25% 0,9-1,2 Ruído fractal
Grão de cartaz retrô 25-40% 0,4-0,6 Turbulência

Notas de desempenho

  • Na maioria dos navegadores, a turbulência SVG dispensa GPU. Ela funciona em fundos CSS e é redesenhada com baixo custo.
  • Reaproveite um único ladrilho. O gerador entrega um ladrilho de 200 x 200 com stitchTiles="stitch", então ele se repete sem emendas visíveis em telas grandes.
  • Evite animar o ruído. O feTurbulence não anima bem sem alterar o baseFrequency, e o desempenho despenca em sessões longas.
  • Sobreponha o ruído a gradientes. Um grão a 10% de opacidade sobre um gradiente CSS entrega uma superfície bem mais rica do que o gradiente sozinho.

Perguntas frequentes

Sempre que uma área grande de cor chapada ou um gradiente parecerem limpos demais. Seções principais, fundos de janelas modais e painéis escuros de interface ganham profundidade com 3-10% de ruído. Evite em áreas de texto, onde ele prejudica a legibilidade.

No filtro feTurbulence do SVG, type="turbulence" produz o valor absoluto do ruído de Perlin (mais contraste, aspecto de nuvens), enquanto type="fractalNoise" devolve valores com sinal (grão mais suave e natural). Para interfaces, o ruído fractal é quase sempre a escolha certa.

Não. O gerador devolve um data URI de SVG embutido com algumas centenas de bytes, dentro do próprio CSS, então não há arquivo de imagem nem requisição extra. Além disso, ele se ajusta a qualquer superfície sem reamostragem.

Sim. Em telas de 8 bits por canal, gradientes podem exibir faixas visíveis em baixo contraste. Uma camada de ruído de 2-3% aplica um pontilhado à transição e elimina o banding tanto em celulares quanto em monitores.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de EditorConfig

Gere um arquivo .editorconfig com suas regras de estilo e tamanho de indentação, fim de linha, charset e espaços em branco para formatação consistente entre IDEs e editores.

Validador de Email

Valide um endereço de email: verificação de sintaxe RFC 5322, consulta de registro MX em tempo real, além de detalhes de parte local, domínio e comprimento. Nenhum email é enviado.

Ferramenta disponível em outros idiomas