Re-creating a simple black gradient

[MexicanR]

I want to have the same black gradient affect on my website as the one shown in the picture below, can anyone explain or tell me where to start?

[IMG]http://image.prntscr.com/image/63f4bf5fe4294151b0261110e363117d.png[/IMG]

[Shadaez]

.gradient-bg{
position: relative

//whatever background you want
}

.gradient-bg:before{
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
}

you can change the % on the first gradient key to start it later and the opacity of the second to make it lighter, obviously
[url]http://codepen.io/Shadaez/pen/ozZrGx[/url]

[MexicanR]

The following is what I've tried to implement on my website, but nothing happens. [URL="http://image.prntscr.com/image/c4d5f8a128194ae3a7b11d8c4f3231b4.png"]Here[/URL] is a picture of what I get.

.intro-bg {
    height: 100%;
    width: 100%;
    background-image: url(../img/intro-bg.jpg);
    background-size: cover;
}
.intro-bg:before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000000, rgba(0,0,0,1) 100%);
}

[Shadaez]

might have to set the .intro-bg to position: relative so the psuedo-element's contained in it, check dev console for errors too