Two Issues with Your Code
First, the two images must be called within a single background-image
call, otherwise the way the "cascading" part of CSS works the second one will just override the first. So the first thing that needs changing is to make all of the calls grouped like this (each successive call separated by commas):
background-image:
linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%),
linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);
This is what the possible duplicate question noted to do, and that is correct, but it probably did not work for you because...
Second, each of those gradient images you have defined are non-transparent, so one of them will "over paint" on top of the other and effectively give you just one image. I think what you really want is a fade effect, which will require you to use alpha opacity to achieve. So every instance of #FFFFFF
needs to change to rgba(255, 255, 255, 0)
, then you get the blending I believe you seek:
background-image:
linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0) 75%, #A3EF69 100%),
linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0) 75%, #A3EF69 100%);