Can you add noise to a CSS3 gradient?
HTML
<div id="box"></div>
CSS
#box {
width:100%;
height:0;
padding-bottom:56.25%;
position:relative;
background-size:55px 10px;
background-repeat: repeat;
}
#box:before {
content:'';
width:100%;
height:100%;
position:absolute;
background-repeat: repeat;
background:url(https://tenman.info/labo/css/files/coupe.jpg);
background-size:contain;
left:0;
z-index:998;
}
#box:after {
content:'';
width:100%;
height:100%;
position:absolute;
mix-blend-mode : overlay;
background-size:15px 13px;
background-repeat: repeat;
background-image: -webkit-repeating-radial-gradient(21% 21%, closest-corner, rgba(72,72,72,.3), rgba(32,32,32,.5), rgba(0,0,0,.6) 20%);
left:0;
top:0;
z-index:999;
}
#box:hover:before{
mix-blend-mode: normal;
}
#box:hover:after{
background-image:none;
mix-blend-mode: normal;
}