Gerador de Gradiente Granulado

Gradientes Granulados Modernos Sem Photoshop

O visual "grainy gradient" — um gradiente suave polvilhado com um grão sutil de filme — está por toda parte no design moderno, de páginas como a da Linear a dezenas de sites de produtos premium. Este gerador produz esse efeito como um SVG compacto e autossuficiente que escala para qualquer resolução e dispensa qualquer imagem bitmap.

Como o Grão é Aplicado

Por baixo dos panos, a ferramenta compõe duas camadas em um mesmo SVG. A camada base é um <rect> preenchido com seu gradiente — linear ou radial, com 2 a 5 paradas. Sobre ela há um segundo <rect> cujo preenchimento é uma textura de ruído monocromática gerada pelo filtro SVG <feTurbulence type="fractalNoise">. A camada de ruído é desenhada com opacidade controlável, responsável pelo efeito "empoeirado" suave.

Como tudo passa por filtros SVG, o padrão de grão se mantém nítido e sem repetição em qualquer tamanho — ao contrário de um PNG tileado, não verá costuras visíveis quando o fundo se estica por uma área hero enorme.

Controles

• Tipo — linear (com ângulo ajustável) ou radial.
• Paradas de cor — 2 a 5 cores com sliders de posição para controle preciso da transição.
• Intensidade do grão — opacidade da camada de ruído. 0 desativa o grão; valores maiores dão mais textura.
• Escala do grão — baseFrequency da turbulência. Escala baixa dá grão grosso e tátil; alta dá ruído fino tipo filme.
• Oitavas — quantas camadas de ruído empilhadas. Mais oitavas = mais detalhe.
• Semente — inteiro para reprodutibilidade. Mesma semente = mesmo padrão de grão.

Onde Usar

• Fundos hero com sensação tátil em vez de estéril
• Splash screens de apps e cards estilo widget iOS
• Banners de lançamento tipo Product Hunt
• Capas de música e podcasts
• Cards de dashboard com profundidade sutil

A saída SVG é sempre mais nítida que um JPG de tamanho semelhante, e seus filtros são acelerados por GPU em todos os navegadores modernos. Copie o código, cole em um <div> e escale onde quiser — o grão permanece fiel em todos os dispositivos e níveis de zoom.