Gerador de textura granulada (noise) para fundos
Ajuste o grão e veja sobre o fundo. O SVG usa o filtro feTurbulence e fica com poucos bytes; o PNG é um bloco pequeno que se repete sem emenda aparente.
Granulado de filme para fundos
Tudo é feito no seu aparelho: nada é enviado para a internet.
Gerador de textura granulada (noise) para fundos: para que serve
Uma camada leve de granulado deixa fundos lisos e degradês com aspecto de papel ou de filme e ainda disfarça as faixas que aparecem em degradês suaves.
Ajuste o tamanho do grão, o detalhe, a opacidade e o modo de mistura e veja o resultado sobre um degradê de teste. Copie o CSS com o ruído em SVG (filtro feTurbulence, com poucos bytes e sem emenda) aplicado num pseudo-elemento, ou baixe um PNG de 128, 256 ou 512 px para repetir no fundo.
Como usar
- Ajuste o grão, a opacidade e a mistura.
- Teste sobre as cores do seu fundo.
- Copie o CSS ou baixe o PNG.
Quando usar
- Fundo de hero com degradê.
- Cartões com textura de papel.
- Visual retrô ou de filme.
Perguntas frequentes
Para que serve o granulado?
Uma camada leve de ruído tira o aspecto plástico de fundos lisos e degradês, deixa o visual mais orgânico e ainda disfarça as faixas que aparecem em degradês suaves (banding).
SVG ou PNG?
O SVG com feTurbulence pesa poucos bytes e escala para qualquer tamanho, mas é desenhado pelo navegador e pode pesar em telas grandes animadas. O PNG é um bloco pequeno repetido, leve de desenhar. Para fundo fixo, os dois funcionam bem.
Quanto de granulado usar?
Pouco. Uma opacidade entre 5% e 15% já dá textura sem sujar a página; acima disso o fundo começa a parecer uma foto ruidosa e atrapalha a leitura do texto por cima.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.