Is it possible to make a hard-edged gradient on a large element?

I've found an alternative using gradients to achieve the same effect, however I think it should be possible to achieve this with 1 gradient, so I consider this a work-around.

The trick is to use multiple backgrounds with 2 gradients that don't change color. Then just define background-size to achieve the hard edge effect. See the working snippet:

div {
  height: 5000px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image: linear-gradient(#000, #000), linear-gradient(#0f0, #0f0);
  background-size: 100% 20px, 100%;
}
div:first-child {
  height: 100px;
}

<div></div>
<div></div>

This works for me.

background: linear-gradient(to bottom, black 0% ,black 20% ,green 20% ,green 100%);

edit: I've tried to do exactly what you're doing in the question, and I'm getting a hard edge on both boxes. Your problem must be related to your browser.

edit 2: confirmed