Generador de texturas de ruido: grano SVG para fondos CSS | We.Inc
Crea una textura de grano de película o de ruido de papel con SVG feTurbulence. Ajusta la frecuencia, las octavas, la semilla y la opacidad, previsualízala sobre un degradado y copia el SVG o una data URL para CSS.
Una textura de ruido es un moteado aleatorio colocado sobre un color plano o un degradado para que parezca impreso en lugar de digital. En el navegador puedes crearla sin ningún archivo de imagen: el filtro SVG feTurbulence genera ruido Perlin a partir de una frecuencia, un número de octavas y una semilla. Ajústalo abajo y copia unos pocos cientos de bytes de código.
Atributos de feTurbulence (valores por defecto según MDN)
Atributo
Qué hace
Por defecto
baseFrequency
Tamaño del moteado; los números más altos dan un grano más fino. Un número, o valores x e y separados
numOctaves
Capas de detalle superpuestas; más capas dan más riqueza y más lentitud
fractalNoise (suave, como nubes) o turbulence (más marcado, ondulado)
Número inicial del patrón aleatorio; cámbialo para obtener otra distribución
stitchTiles
stitch suaviza los bordes para que las baldosas repetidas se unan sin costuras
noStitch
El grano quita el aspecto plástico a los degradados grandes y evita las bandas de color en fondos de portada anchos. Una baldosa de grano en PNG añade una descarga y se ve borrosa al escalarla, mientras que un filtro SVG es un texto diminuto que se ve nítido a cualquier tamaño. Ajusta los controles y mira la textura sobre un degradado de ejemplo.
Elige fractal noise para un grano de película suave o turbulence para un aspecto más áspero y marmolado.
Sube la frecuencia para un grano más fino y añade octavas para más detalle. Cambia la semilla para obtener otra distribución aleatoria.
Ajusta la intensidad del grano sobre el degradado de ejemplo y elige si conserva el color o pasa a gris.
Copia el archivo SVG, o el CSS que lo incrusta como fondo en una data URL.
Para un grano sutil sobre un degradado, mantén la opacidad de la textura entre 0.1 y 0.3. Con valores más altos empieza a verse sucio.
Una frecuencia de entre 0.6 y 0.9 con fractal noise se percibe como grano de película en tamaños de pantalla normales.
Desatura el ruido a gris salvo que quieras motas de color; feTurbulence produce ruido de color en cada canal.
Las zonas grandes con filtros cuestan tiempo de renderizado. Aplicar el grano como imagen de fondo de una baldosa fija es más barato que filtrar en vivo un elemento a pantalla completa.
Preguntas frecuentes
¿Qué es feTurbulence?
Es una primitiva de filtro SVG que crea una imagen a partir de la función de ruido Perlin. No necesita imagen de entrada, así que un solo elemento filter dentro de un SVG puede pintar una textura entera. Según MDN, los navegadores lo admiten de forma generalizada desde 2015.
¿Qué diferencia hay entre fractalNoise y turbulence?
fractalNoise mezcla sus octavas de forma suave y parece nubes suaves o grano de película. turbulence usa valores absolutos del ruido, lo que crea crestas más marcadas, más parecidas al mármol, al humo o a las ondas del agua.
¿Cómo añado grano a un degradado CSS?
Apila dos fondos: el SVG de ruido como data URL encima y el degradado debajo, o pon el ruido en una capa ::before con baja opacidad y un modo de fusión como overlay o soft-light. El ejemplo de esta página muestra la versión con pseudoelemento.
¿La textura se repetirá sin costuras?
Pon stitchTiles en stitch. El navegador ajusta entonces ligeramente la frecuencia para que el patrón encaje en un número entero de baldosas, lo que elimina la unión visible donde se juntan las copias.
Cómo se traducen los números en lo que ves
baseFrequency se mide en ciclos de ruido por píxel del área del filtro, así que 0.05 da manchas grandes y 0.9 da motas del tamaño del polvo. Dos números estiran el ruido, algo útil para metal cepillado o vetas de madera.
Cada octava extra añade una capa más fina con el doble de frecuencia y la mitad de intensidad. A partir de cuatro o cinco el cambio apenas se nota, pero el trabajo del renderizador sigue creciendo.
Cómo hacer que el grano quede bien en un sitio
El grano funciona mejor como una capa discreta. Mézclalo con overlay o soft-light para que aclare las zonas claras y oscurezca las oscuras, en lugar de volverlo todo gris.
Revisa el contraste del texto después de añadir la textura. El moteado detrás de un texto pequeño puede dificultar la lectura, así que reserva el grano intenso para fondos y zonas de portada.
Grano sobre una tarjeta con degradado
Capa de ruido con modo de fusión
El SVG pinta ruido gris en una baldosa de 200 píxeles. La capa ::before la repite con baja opacidad y la mezcla con el degradado.
La misma textura como archivo SVG independiente
Guárdalo como grain.svg y úsalo con background-image: url(grain.svg). La matriz de color vuelve gris el ruido.
Estudio de grano
Cada cambio vuelve a renderizar en vivo el filtro SVG sobre el degradado de ejemplo. No se sube nada; tu navegador dibuja la textura.