PT
PortuguêsEnglishEspañol
Todas as ferramentas
Ferramentas para programador 100% grátis

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.

Voltar para CSS e design

Granulado de filme para fundos

Tudo é feito no seu aparelho: nada é enviado para a internet.

Texto sobre o fundo

Disponível em: Português

Publicidade

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

  1. Ajuste o grão, a opacidade e a mistura.
  2. Teste sobre as cores do seu fundo.
  3. 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.

Ferramentas parecidas

As ferramentas são oferecidas como estão, sem garantia. Não nos responsabilizamos pelos resultados nem pelo uso que se faz deles.