Esta es, con mucho, la forma más libre de problemas y la mejor de implementar esto. Es puramente CSS y muy, muy simple de hacer, sin archivos adicionales-nada. Ok, no es la mejor manera posible, pero funciona muy bien, muy confiable (nunca falló al probar en navegadores muy antiguos) y muy rápido de cargar.

Lo encontró hace unos meses, y lo usó desde entonces, simplemente copie y pegue este código en su CSS.

background-image: url(data:image/png;base64,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);

Luego agrega tu color de fondo

background-color:#0094d0;

Demo: JSFiddle

Fuente: https://coderwall.com/p/m-uwvg

Puede usar un URI de datos dentro de su CSS para generar ruido programáticamente sin necesidad de un enlace a un archivo de imagen externo.

Ejemplo aquí, vea la fuente para ver cómo se ha hecho.

Entrada de blog con código descargable aquí

Sí, actualmente no hay un enfoque basado en CSS para las texturas de ruido. Sin embargo, si está empeñado en un enfoque programático (en lugar de basado en imágenes), podría intentar usar HTML5 canvas. Aquí hay un tutorial sobre cómo generar ruido usando JavaScript Creating > Creando ruido en HTML5 Canvas

Sin embargo, hacer el enfoque Canvas resultará en una experiencia mucho más lenta para sus visitantes, porque A) JavaScript es un lenguaje interpretado, y B) escribir gráficos usando JS es extra lento.

Por lo tanto, a menos que esté tratando de hacer un punto mediante el uso de HTML5, me quedaría con una imagen. Será más rápido (para que usted haga y para que sus usuarios carguen), y tendrá un grado más fino de control sobre la apariencia.

Por el bien de la novedad, aquí hay algo de ruido CSS puro sin usar un URI de datos (aunque parece que solo funciona en webkit):

#box {
  width:250px;
  height:250px;
  position:relative;
  background-size:55px 10px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(1% 21%, closest-corner, rgba(255,0,255,.5), rgba(0,255,255,.5), rgba(0,0,0,1) 1.7%), -webkit-repeating-radial-gradient(51% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,255,1), rgba(0,255,0,1) 10%); 
}
#box::before {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  mix-blend-mode:exclusion;
  background-size:12px 22px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(61% 21%, closest-corner, rgba(255,255,255,1), rgba(0,255,0,.5), rgba(3,0,255,1) 20%),  -webkit-repeating-radial-gradient(91% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,1,.5), rgba(055,255,255,1) 20%);
  left:0;
  z-index:998;
}
#box::after {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  mix-blend-mode:exclusion;
  background-size:15px 13px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(21% 21%, closest-corner, rgba(255,255,255,1), rgba(0,0,255,.5), rgba(3,0,255,1) 20%);
  left:0;
  top:0;
  z-index:999;
}

<div id="box"></div>

Si bien esto no califica como ruido verdadero, un enfoque CSS3 puro usaría múltiples selectores de fondo lineal repetido, que a menudo se usan en generadores de patrones.

Aquí hay algunos ejemplos:

• http://jsfiddle.net/andrewodri/eMB6E /
• http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
• http://lea.verou.me/css3patterns/

Con alguna combinación correcta de fondos, ángulos, paradas de color y transparencia, un efecto similar al ruido razonable debería ser alcanzable:)

Espero que eso te ponga en la dirección correcta de todos modos...

Crear Texturas (Ruido) Usando Filtros SVG y Gradientes CSS

¿Quieres ruido en tu gradiente? Estás de suerte!

El ruido de Perlin es un tipo de ruido de gradiente. El estándar SVG especifica un filtro primitivo llamado <feTurbulence>, que implementa la función Perlin. Permite la síntesis de texturas artificiales como nubes o mármol-el ruido que desee.

Paso 1: Definir un gráfico SVG

Crear un pequeño archivo SVG llamado noise.svg.

<svg
  xmlns='http://www.w3.org/2000/svg'
  xmlns:xlink='http://www.w3.org/1999/xlink'
  width='300' height='300'>

    <filter id='n' x='0' y='0'>
            <feTurbulence
              type='fractalNoise'
              baseFrequency='0.75'
              stitchTiles='stitch'/>
    </filter>

    <rect width='300' height='300' fill='#fff'/>
    <rect width='300' height='300' filter="url(#n)" opacity='0.80'/>
</svg>

Este gráfico define dos rectángulos. El primero está lleno de un color sólido. El segundo es translúcido con el filtro de ruido aplicado. El segundo rectángulo se superpone al primero para proporcionar un efecto de ruido.

Opciones SVG

1. Puño y más obvio es que se puede cambiar las dimensiones del gráfico. Sin embargo, la propiedad CSS background-repeat se puede usar para llenar un elemento, por lo que 300×300 debería ser suficiente.

2. El filtro type el atributo puede ser fractalNoise o turbulence, que especifica la función de filtro. Ambos proporcionan un visual diferente, pero en mi opinión, el filtro de ruido es un poco más sutil.

3. El atributo baseFrequency del filtro puede variar de 0.5 a 0.9 para proporcionar un curso a la textura fina, respectivamente. Este rango es visualmente óptimo para cualquier filtro en mi opinión.

4. El primer rectángulo fill se puede cambiar para proporcionar un color base diferente. Más tarde, sin embargo, esencialmente combinamos este color con un degradado CSS translúcido, que también define un color (s). Así que el blanco es un buen punto de partida aquí.

5. El segundo rectángulo opacity puede variar de 0.2–0.9 para establecer la intensidad del filtro, donde un número más alto aumenta la intensidad.

En este punto, podría modificar las opciones antes mencionadas, establecer este gráfico de ruido como una imagen de fondo a través de CSS, y llamarlo un día. Pero si quieres un gradiente, como el OP, ir al paso 2.

Paso 2: Aplicar un Gradiente CSS

Utilizando el background-image propiedad, puede establecer el gráfico de ruido SVG como fondo en cualquier elemento y superponer un gradiente . En este ejemplo, aplicaré el gráfico de ruido a todo el cuerpo y superpondré un gradiente lineal .

body {
    /* white to black linear noise gradient spanning from top to bottom */
    background:
      linear-gradient(rgba(255,255,255,.5), rgba(0,0,0,.5)),
      url('noise.svg');
}

La función linear-gradient() crea una pseudo imagen, que se apila encima del ruido .svg . El resultado es un gradiente translúcido con nuestro ruido mostrando a través se.

Opciones CSS

1. En primer lugar, y lo más obvio, es que los colores de degradado definidos se pueden cambiar. Sin embargo, si desea un color sólido sin degradado, haga que los dos colores del punto final sean iguales. El beneficio es que puede usar el mismo gráfico de ruido con o sin un gradiente en un sitio o entre proyectos.

2. Múltiples imágenes, creadas con el *-gradient() funciones, se pueden superponer en el gráfico de ruido y más de dos colores los parámetros y ángulos se pueden especificar en una sola función de gradiente para proporcionar todo tipo de imágenes geniales.

3. La opacidad de los parámetros de gradiente-es decir, rgba() y hsla()-se puede aumentar para intensificar el color definido y reducir el nivel de ruido. Una vez más, 0.2–0.9 es un rango ideal.

Conclusión

Esta es una solución altamente personalizable y muy liviana (~400 bytes) que le permite definir simplemente el ruido de cualquier color o gradiente. Aunque hay varias perillas para girar aquí, esto es solo el comienzo. Hay otras primitivas de filtro SVG, como<feGaussianBlur> y <feColorMatrix>, que puede proporcionar resultados adicionales.

No es posible (incluso si lo fuera, se necesitaría un montón de trucos de código para hacerlo) generar texturas de ruido usando CSS solo. No hay ninguna nueva propiedad de CSS3 que proporcione ese tipo de efecto fuera de la caja. Una solución mucho más rápida es utilizar un editor gráfico como Photoshop para hacer eso.