Generador de textura de ruido
Crea una pequeña pieza de ruido aleatorio que se repite sin costuras visibles. Úsala como capa de grano sobre degradados y fotos, o como fondo sutil con aspecto de papel. La textura se dibuja en tu navegador y se descarga como PNG o se copia como CSS.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Elige el tamaño de la pieza y el del grano; 1 px es el grano más fino.
- Ajusta la intensidad y el color base, o marca fondo transparente para usarla como capa superpuesta.
- Desmarca ruido gris para obtener motas de color y pulsa Nuevo ruido para otro dibujo.
- Descarga el PNG o copia el CSS.
Cómo funciona
La pieza se divide en celdas cuadradas del tamaño del grano. Cada celda recibe un brillo aleatorio de 0 a 255, o tres valores aleatorios para rojo, verde y azul con el ruido de color. Ese valor se mezcla con el color base según la intensidad o, con fondo transparente, se escribe con la intensidad como canal alfa. Los números aleatorios salen de un generador con semilla, así que la vista previa y el archivo son idénticos.
Ejemplo
Con una base #7f8c8d (rojo 127) y una intensidad del 25 %, una celda cuyo valor aleatorio es 255 obtiene un rojo de 127 × 0,75 + 255 × 0,25 = 159, y una con valor 0 obtiene 95. Toda la pieza varía dentro de esa franja alrededor del color base.
Consejos
- Una intensidad del 15–30 % basta para un grano sutil; valores más altos parecen un televisor antiguo.
- Un grano de 2 px se aprecia mejor en pantallas de alta densidad, donde el ruido de 1 px puede parecer un tono uniforme.
- El grano sobre degradados grandes oculta las bandas de color que a veces aparecen en ellos.
Preguntas frecuentes
¿Por qué la textura no tiene costuras?
Cada celda del ruido es aleatoria e independiente de sus vecinas, así que el borde derecho de la pieza no tiene que coincidir con el izquierdo. Al repetirse, las uniones parecen cualquier otra parte del ruido.
¿Cómo la uso como capa de grano?
Activa el fondo transparente y descarga el PNG; luego ponlo en una capa de fondo adicional o en un pseudoelemento sobre un degradado o una foto. Con una pieza transparente, el ruido oscurece y aclara lo que hay debajo.
¿Qué hace la intensidad?
Es la proporción de ruido en cada píxel. Sobre un color base, cada píxel es base × (1 − intensidad) + ruido × intensidad; con fondo transparente, los píxeles de ruido toman la intensidad como opacidad.
¿Qué obtengo con Copiar CSS?
Una regla background-image con el PNG incrustado como data URL, así que no necesita un archivo aparte. Las piezas grandes generan data URL largas; a partir de 256 px suele ser mejor descargar el archivo.