Fixed footer reveal

The footer sits fixed behind the page, and the content lifts off it at the end of the scroll to uncover it.

Grade: ARuntimes: cssStatus: code-only

Documented, no live demo yet — the code below is complete.

Intent

Most footers are the part of the page nobody designed. Fixing it behind the content turns arriving at the end into a small reveal, which is the last impression a visitor takes away — and it costs no JavaScript at all.

Implementation

The whole pattern is three rules. The only contract is that the content wrapper's bottom margin matches the footer height.

Dependencies: none

html-css-js

<main class="page">…</main>

<footer class="footer">
  <p class="closing">Now go build it.</p>
</footer>

<style>
.footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 0;
  height: 60vh;
  display: grid;
  place-content: center;
}

/* Opaque, above the footer, and reserving exactly its height. */
.page {
  position: relative;
  z-index: 10;
  background: var(--bg);
  margin-bottom: 60vh;
}
</style>

Use it when

The end of a long marketing page, where the footer holds a real closing statement.
Any page whose footer is worth designing.

Avoid it when

Short pages, where the footer is visible from the start and the effect never happens.
Footers taller than about 60% of the viewport — the reserved space becomes dead scroll.

Accessibility

The footer stays in DOM order at the end of the document, so nothing changes for screen readers or keyboard order.
The content wrapper's background must be fully opaque, or the footer shows through the page as you scroll.
No motion at all, so there is nothing to disable under reduced motion.

Performance

Pure CSS — no scroll listener, no observer, no JavaScript.
Keep the footer's own content light; it is painted for the entire scroll even while hidden.

Knobs

height: Footer height, and the matching content margin. Default: 60vh

Composition

Pairs with

Conflicts with

None.

Instruction for Claude Code

Add a fixed footer reveal: position the footer fixed at bottom 0 with z-index 0 and a set height, then give the page content a relative wrapper at a higher z-index with an opaque background and a bottom margin equal to that height. The content lifts off the footer as you reach the end of the scroll. Use no JavaScript. Keep the footer under about 60vh, and make sure the content background is fully opaque or the footer shows through.