Add Noise to a gradient in CSS3

A full page radial gradient background with added noise. CSS3

by abolyc

HTML

<h1>Gradient background with noise</h1>

CSS

body:before {
    content:"";
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:-2;
    background: #fcfff4;
    /* Old browsers */
    background: linear-gradient(to bottom, #dc71f2 0%,#c128d6 47%,#c128d6 47%,#b886f9 100%);
    /* W3C */}
    
body:after {
    content:"";
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:10;
    background-image:...

JavaScript

//gradient css generated at http://www.colorzilla.com/gradient-editor/
//noise dataurl generated at http://www.noisetexturegenerator.com/