Gerador de Grain SVG

Grain SVG: a textura de filme analógico na web moderna

O grão (film grain) é a textura granulada inerente à fotografia analógica — filmes 35mm como Kodak Tri-X ou Portra 400 tinham cristais de haleto de prata visíveis que davam à imagem uma qualidade tátil, fotográfica. A impressão Risograph dos anos 1980 herdou o mesmo visual no design editorial, e a partir de 2019 a web viveu um "renascimento do grão": Apple, Stripe, The Verge, Linear e a maioria dos sites premiados em Awwwards aplicam grain sutil sobre cores chapadas para escapar da frieza do CSS puro.

O SVG entrega grain praticamente de graça usando a primitiva nativa <feTurbulence> — um gerador de ruído Perlin/fractal padronizado no SVG 1.1. Combine com <feColorMatrix> para controlar opacidade e você tem uma textura autocontida que comprime para algumas centenas de bytes:

<filter id="g">
  <feTurbulence baseFrequency="0.6" numOctaves="3"/>
  <feColorMatrix values="0 0 0 0 0
                         0 0 0 0 0
                         0 0 0 0 0
                         0 0 0 0.15 0"/>
</filter>
<rect width="100%" height="100%" filter="url(#g)"/>

Estratégias de aplicação

• Overlay tela cheia — div fixa sobre todo o conteúdo com 10–20% de opacidade; "tudo parece ter sido fotografado".
• Apenas áreas coloridas grandes — aplique em hero sections e CTAs; mascara banding de gradiente em fills chapados.
• Dentro de cards de UI — dá sensação tátil em botões e superfícies sem invadir a tipografia.
• Sobre imagens — grain sobre JPEG com mix-blend-mode: multiply simula filme instantaneamente.

Truque de performance: gerar um tile, repetir

Rodar feTurbulence em tela cheia a cada frame é pesado para a GPU e pode derrubar o scroll para 30 fps em mobile médio. Solução: gere um único tile 256×256, exporte como PNG ou data URI inline e use como background-image com background-repeat: repeat. O navegador renderiza o tile uma vez e replica barato pela viewport.

Animar o grain — textura "viva"

Grain estático parece congelado. Grão de filme de verdade dança entre frames porque cada cristal é uma exposição única. Reproduza o efeito mutando o atributo seed do feTurbulence dentro de um requestAnimationFrame — ou cicle por uma sprite sheet com 8 tiles pré-renderizados para uma versão mais barata. O resultado lembra estática de TV e parece vivo sem distrair.

Grain vs noise: a diferença sutil

Saem da mesma primitiva, mas as convenções diferem. Noise costuma ser mais geométrico, alto contraste, às vezes colorido — visual "pixels aleatórios" para arte generativa. Grain é monocromático, baixo contraste, mais fino — feito para desaparecer no fundo e registrar apenas como textura, imitando emulsão fotográfica. Use baseFrequency 0.6–1.2 e opacidade 0.1–0.2 para grain; frequências e opacidades maiores entram no território de noise.

Fallback só com CSS

Sem SVG dá para simular grain leve com filter: contrast(170%) brightness(120%) sobre um radial-gradient sutil — realça as variações imperceptíveis de blending de cor. Não é ruído real, mas em dispositivos fracos ou páginas muito densas custa quase nada. Existe também um plugin Tailwind (tailwindcss-noise) que expõe classes utilitárias como bg-noise.

Estética print / Risograph

Combine grain com paleta restrita de 2–3 cores, tipografia serifada chunky e textura de papel falsa e você chega ao visual "retrô moderno" / Risograph que domina SaaS indie, arte de podcast e marcas pequenas em 2024-2026 — Are.na, Read.cv, changelogs do Linear e a maioria dos estúdios boutique usam essa combinação.

Perguntas frequentes

O grain prejudica a performance? Tela cheia com feTurbulence ao vivo, sim — sobretudo em mobile. Use um tile pré-renderizado e repita como background-image; o custo cai para o de um PNG minúsculo.

Qual cor o grain deve ter? Para fotos, multiplique grain preto sobre a imagem para manter as cores originais. Para cores chapadas de marca, use a mesma família de cor (um pouco mais escura/clara) para texturizar sem mudar o tom.

Funciona bem no mobile? Chrome Android renderiza feTurbulence corretamente. Safari iOS ocasionalmente mostra banding ou costura nas bordas do tile — use um tile único maior (≥ 512px) e teste em um aparelho real antes de subir.

Acessibilidade? O grain é decorativo; adicione aria-hidden="true" no SVG. Se o usuário ativou prefers-reduced-motion, desabilite qualquer grain animado — a tremulação pode causar desconforto.