Add a transparent gradient overlay to individual sections?

Site URL: https://shuvamkabir.net

I'm attempting to add a white gradient above my background images. My first thought is to add an additional element that serves as an intermediate layer. I've tried the following, which I copied from here :

[data-section-id="xxxxxxxxxxxxxxx"]{ 
  .section-background::after{
  content:"";
  display:block;
  position:relative;
  width:100%;
  height:100%;
  /* in hsla color format (below), the last number is between 0 and 1 and changes the opacity */
  background-color:hsla(100,20,50,.5) !important; 
  }
}

And then replace the background-color() with a linear-gradient() instruction. However, the above code doesn't seem to work. I should add that I am also using javascript to create a parallax effect, which I am hoping isn't conflicting.

Can anyone walk me through adding an additional element behind my text/image blocks and above my background to which I can add a gradient that shifts from white-to-transparent-to-white?

Alternatively, can anyone show me how to make an image block flush with with the top of a section (so I can just stick a small PNG at the top and bottom of my sections and call it good)?

replace 

[data-section-id="xxxxxxxxxxxxxxx"]

with

[data-section-id="xxxxxxxxxxxxxxx"] .section-background

4 hours ago, tuanphan said:

replace 

[data-section-id="xxxxxxxxxxxxxxx"]

with

[data-section-id="xxxxxxxxxxxxxxx"] .section-background

Thank you for your response. Unfortunately, that didn't seem to have any effect. There's no discernible element added.

Can you share link to page where you want to use gradient?

[data-section-id="5edbdd7789d95f3735d2f0ed"] .section-background-overlay {
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%) !important;
}

I was able to create a gradient that works perfectly! 

I used this code:

// MAKE BACKGROUND GRADIENT IN ONE SECTION OF A PAGE
section[data-section-id="5fec56e59056c549148b6205"] .section-background {
    background: linear-gradient(180deg, rgba(246,221,198,1) 0%, rgba(230,183,148,1) 35%, rgba(230,183,148,1) 100%) !important;
}


section[data-section-id="5fec56f99056c549148b6258"] .section-background {
background: linear-gradient(180deg, rgba(246,221,198,1) 0%, rgba(230,183,148,1) 35%, rgba(230,183,148,1) 100%) !important;  
}
//-------------------//

There are other methods but the one I've shared above is for adding a gradient on one specific section of a page. 

Hi,  I want to make my hero/background image on my first section fade out to transparent at the bottom.  Does anyone know how to do this?  I have tried section id and linear gradient from 100% - 0% but somethings not working.  

www.sucoca.com/about.  pw:chocolate

Thanks in advance to anyone who can help. 

this is what i've tried:

section[data-section-id="61922c0a9680fd299e101378"] .section-background{

background-color:transparent!important

}
section[data-section-id="61922c0a9680fd299e101378"] .section-background-overlay

{
background:linear-gradient( rgba(0,0,0,1),rgba(0,0,0,0.1)!important;)
}