A Footer That Slides Out From Under the Content

The newly launched The Markup, built by Upstatement, is full of sharp design details—clean typography, an interesting layout, and bold angled hover states. But one of the cleverest touches is its footer, which appears to slide out from beneath the page content as you scroll to the bottom. The effect feels like the main content is a curtain lifting to reveal the footer behind it.

The good news is that this effect doesn't require a lot of JavaScript or a framework. A little CSS does the job. Here's the core recipe:

  1. Make the main content area at least 100vh tall.
  2. Give the main content area a solid background to cover the footer behind it.
  3. Place the footer after the main content in the HTML, then use relative positioning and z-index to ensure the main content sits on top.
  4. Use sticky positioning on the footer to pin it to the bottom of the viewport.

That last step is the neatest part. The Markup itself achieves the effect with a fixed-position footer plus a magic number in the margin-bottom of the main content to prevent overlap. Using position: sticky on the footer instead avoids that fragility entirely—no magic numbers required.

Credit goes to Stephen Shaw for demonstrating the sticky approach. While the fixed-position method works, the sticky variant is more robust and easier to maintain.

There's also a related technique shown by Preethi in 2018. That version relies on a linear gradient applied to the body's background, which is a useful workaround if a solid color isn't practical for your design.