CSS Noise

Attempt to generate noise on an element using CSS (without JS) Uses CSS3 gradients to generate dots, trying to implement Cicada principle to create faux random placement. webkit/ff3.6+ only

by mightymeta

HTML

<div id="noise-test">
</div>

CSS

#noise-test {
    
    position: relative;
    z-index: 1;
    background-color: #666;
    background-image: -webkit-linear-gradient(black, transparent);
    background-image: -moz-linear-gradient(black, transparent);
    height: 300px;
    margin: 20px auto;
    width: 400px;
    
}
    
#noise-test:before {
    
    content: "";
    position: absolute;
    z-index: -2;
    top:0;
    bottom:0;
    left:25%;
    right:0;
       
    opacity: 0.25;
    
    background-image:
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px),    
        -webkit-radial-gradient(white 0px, transparent 1px),    
        -webkit-radial-gradient(white 0px, transparent 1px),
        -webkit-radial-gradient(white 0px, transparent 1px),
        -webkit-radial-gradient(white 0px, transparent 1px),
        -webkit-radial-gradient(white 0px, transparent 1px),
        -webkit-radial-gradient(white 0px, transparent 1px),
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
        -webkit-radial-gradient(white 0px, transparent 1px), 
       ...