Gradient overlay by code seems doesn't work

How To
1

Hi, i’m trying to add this css for overlay gradient on top and on bottom, but it seems that it doesn’t work.

%root%::after {
background-image: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));
bottom: 0;
position: absolute;
content: "";
display:block;
z-index:1;
pointer-events: none;
  }

%root%::before {
background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));
top: 0;
position: absolute;
content: "";
display:block;
z-index:1;
pointer-events: none;
  }

Maybe i make something wrong.
Could you help me?
Thanks