Softonic

Generador de texturas de ruido

Paso 1 / 2
Siguiente

Una pizca de ruido disimula el banding, suaviza los rellenos de color plano y hace que los degradados de la interfaz resulten menos asépticos. Este generador crea una textura de ruido cuadrada que se repite sin costuras usando el filtro SVG feTurbulence, con controles de color de fondo, opacidad del ruido, frecuencia del grano y tipo de ruido, y te devuelve el CSS ya montado: un color de fondo más un data URI de SVG en línea que puedes pegar directamente en tu hoja de estilos.

Cómo generar una textura de ruido

  1. 1

    Elige el color de fondo

    El grano se superpone a este color, así que parte de la superficie que vas a usar de verdad.

  2. 2

    Ajusta la opacidad

    Desde apenas perceptible (2-5%) hasta un grano de película marcado (25% o más). En interfaces, lo sutil casi siempre gana.

  3. 3

    Regula la frecuencia

    Una frecuencia base más alta da un grano fino y denso; una más baja produce manchas más grandes y suaves.

  4. 4

    Elige el tipo de ruido

    El ruido fractal es suave y natural. La turbulencia tiene más contraste y aspecto de nubes.

  5. 5

    Copia el CSS

    La salida es un color de fondo más un data URI de SVG en línea, listo para pegar en tu hoja de estilos.

Ruido SVG con feTurbulence

La forma más compacta de servir ruido es SVG más un filtro de turbulencia:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

Insértalo en línea como background-image: url("data:image/svg+xml,...") y tendrás unos cientos de bytes de marcado que se repiten sobre cualquier superficie, sin ninguna petición HTTP adicional.

Ajustes recomendados según el caso

Caso de uso Opacidad Frecuencia base Tipo de ruido
Paneles de interfaz en modo oscuro 3-5% 0,8-1,0 Ruido fractal
Capa sobre el degradado de la cabecera 5-10% 0,7-0,9 Ruido fractal
Tarjeta con textura de papel 8-15% 0,6-0,8 Ruido fractal
Foto con grano de película 15-25% 0,9-1,2 Ruido fractal
Grano de póster retro 25-40% 0,4-0,6 Turbulencia

Notas de rendimiento

  • La turbulencia SVG no usa GPU en la mayoría de navegadores. Funciona en fondos CSS y se repinta de forma muy económica.
  • Reutiliza un solo mosaico. El generador produce un mosaico de 200 x 200 con stitchTiles="stitch", de modo que se repite sin que se noten las juntas en pantallas grandes.
  • Evita animar el ruido. feTurbulence no se anima bien sin cambiar baseFrequency, y el rendimiento se hunde en sesiones largas.
  • Superpón el ruido a los degradados. Un grano al 10% de opacidad sobre un degradado CSS da una superficie mucho más rica que el degradado por sí solo.

Preguntas frecuentes

Siempre que tengas una zona amplia de color plano o un degradado que resulte demasiado limpio. Las cabeceras, los fondos de ventanas modales y los paneles oscuros de interfaz ganan profundidad con un ruido del 3-10%. Evítalo en zonas de texto, donde puede perjudicar la legibilidad.

En el filtro feTurbulence de SVG, type="turbulence" toma el valor absoluto del ruido de Perlin (más contraste, aspecto de nubes), mientras que type="fractalNoise" usa valores con signo (grano más suave y natural). Para interfaces, el ruido fractal es casi siempre la opción correcta.

No. El generador devuelve un data URI de SVG en línea de unos pocos cientos de bytes, incrustado en el propio CSS, así que no hay archivo de imagen ni petición extra. Además, escala a cualquier superficie sin remuestreo.

Sí. En pantallas de 8 bits por canal, los degradados pueden mostrar bandas visibles con poco contraste. Una capa de ruido del 2-3% aplica un tramado a la transición y elimina el banding tanto en móviles como en monitores.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Generador de Formularios CSS

Genera el CSS de un formulario completo con estilo: una cuadrícula de formulario, etiquetas, entradas, áreas de texto, selectores y estados de foco claros. Elige el color de acento, el radio de las esquinas y la separación, y copia el código.

Generador de EditorConfig

Genera un archivo .editorconfig con tu estilo y tamaño de indentación, fin de línea, charset y reglas de espacios para un formato consistente en IDEs y editores.

Herramienta disponible en otros idiomas