Grainy Gradient playground

Explore the parameters that make up an effect called the grainy gradient.
Read more on CSS-Tricks.

1. SVG

<!-- svg: first layer -->
<svg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'>
  <filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='0.65' 
      numOctaves='3' 
      stitchTiles='stitch'/>
  </filter>
  
  <rect width='100%' height='100%' filter='url(#noiseFilter)'/>
</svg>

2. CSS Gradient

/* css gradient: second layer */
{
  width: 250px;
  height: 250px;
  background: 
	linear-gradient(0deg, rgba(0,0,255,1), rgba(0,0,0,0));
  /* filter: contrast(170%) brightness(1000%); */
}
linear

3. SVG + Gradient + CSSfilter

/* resulting css */
{
  width: 250px;
  height: 250px;
  filter: contrast(170%) brightness(1000%);
  background: 
	linear-gradient(0deg, rgba(0,0,255,1), rgba(0,0,0,0)),
	url(/👆/that/noise.svg);
}