title: CSS gradient-fade/disappear adjacent to an element
body: <p>I have a footer element and I'd like to fade all content above it, as follows:</p>
  <blockquote>
  <p>scrollable mixed content (should be normal/solid on top)</p>
  <p>scrollable mixed content (should transition to transparent here)</p>
  <hr />
  <p>fixed-position, solid, footer</p>
  </blockquote>
  <p>The &quot;mixed content&quot; could be anything, there's no set background color. I'm trying to blend or mask the content so it fades to transparent as it approaches the footer boundary.</p>
  <p>I don't think it's possible with a footer background image or webkit-mask because that relies on a fixed background color for the mixed content. The only idea I had was putting all the mixed content in a fixed container element and using a mask on the bottom of it, but that's complicated and slows everything down.</p>