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

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

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 Imagem Markdown

Gere a sintaxe de imagem do Markdown com texto alternativo, atributo de título e link opcional. Saída inline e em estilo de referência.

Ofuscador de JavaScript

Ofusque JavaScript com codificação de array de strings, renomeação de variáveis, achatamento de fluxo de controle e injeção de código morto para proteção do front-end.

Ferramenta disponível em outros idiomas