Noise filter

by marakoss

HTML

<div class="box overlay vignette">
    <div class="box pattern">
        text
    </div>
</div>

CSS

.pattern:after{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQID/DAwMjCAuiIBzYPJgGXTVMEEU1egqQZr+AwAAogUFRDZaMgAAAABJRU5ErkJggg==);
}

.pattern:before{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQIW2NkYGD4z8DAwMgABXAGTAImAFeFrAKk6T8AguEEBJ+kxwAAAAAASUVORK5CYII=);
    animation: movetop 1s linear 0s infinite, moveleft 0.5s linear -0.5s infinite;
    opacity: 0.2;
}

.pattern:before, .pattern:after{
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: block;
}

.vignette:before{    
    pointer-events: none;

    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
}

.vignette:before {
    -moz-box-shadow: inset 0 0 10em rgba(0,0,0,0.3);  
    -webkit-box-shadow: inset 0 0 10em rgba(0,0,0,0.3);   
    box-shadow: inset 0 0 10em rgba(0,0,0,0.3);
}

.overlay{
    position: relative:
}

.overlay:after{
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: block;
    mix-blend-mode: hue;   
    animation: movetop2 0.5s linear 0s infinite;
}

.overlay:after{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+50,ffffff+100&0+0,1+50,0+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

.pattern{
    position: relative;

    background:...