I took a quick look - initially I was thinking they'd be doing something smart, like using CSS blending filters or a text-mask technique as to avoid duplicating HTML markup - but alas, no: duplicating HTM is exactly what they're doing: there's two copies of the sidebar HTML (`div.gta-article--scroller--top` and `div.gta-article--scroller--bottom`), the one with white-text is z-ordered above the scrolling gradient, the other (with green text) is z-ordered behind it.
I'm surprised at the extent people still compromise their HTML for CSS effects when it really isn't necessary - the curse of divitis still exists :/
Trying to do it in "proper" CSS could be fiddly to get right, and may or may not work the same in all browsers. (I don't know off-hand about this particular effect, but I've done some work with CSS gradients recently and they really don't compose well with other features.)
of all things, the extra few divs and css isn't gonna cause issues here.