CSS-Only Parallax Perspective Section — Free HTML CSS JS Snippet

<div class="pp-container" id="ppContainer">
  <section class="pp-group">
    <div class="parallax-bg pp-bg-a"></div>
    <div class="pp-foreground">
      <span class="pp-eyebrow">Scene One</span>
      <h2>Pure CSS Depth</h2>
      <p>Scroll inside this box — no scroll-linked JavaScript at all.</p>
    </div>
    <span class="pp-scrollcue">Scroll ↓</span>
  </section>

  <section class="pp-group">
    <div class="parallax-bg pp-bg-b"></div>
    <div class="pp-foreground">
      <span class="pp-eyebrow">Scene Two</span>
      <h2>Perspective &amp; TranslateZ</h2>
      <p>The background layer sits behind the scroll plane and scales to compensate.</p>
    </div>
  </section>

  <section class="pp-group">
    <div class="parallax-bg pp-bg-c"></div>
    <div class="pp-foreground">
      <span class="pp-eyebrow">Scene Three</span>
      <h2>Zero Scroll Listeners</h2>
      <p>The browser's own 3D rendering handles the depth illusion.</p>
    </div>
  </section>
</div>

*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;margin:0}
.pp-container{
  /* every scene is exactly one container-height tall, so a snapped scene lines up with its layer */
  --pp-h:max(70vh,420px);
  height:var(--pp-h);overflow-y:scroll;overflow-x:hidden;
  /* origin centred horizontally: with translateZ(-1px) scale(2) the layer then projects back
     to exactly its section's width (a 0 0 origin shifted every layer a quarter-width left) */
  perspective:1px;perspective-origin:50% 50%;
  background:#0b0d14;
  scroll-snap-type:y mandatory;
  scrollbar-width:thin;scrollbar-color:#4338ca #0b0d14;
}
.pp-container::-webkit-scrollbar{width:8px}
.pp-container::-webkit-scrollbar-track{background:#0b0d14}
.pp-container::-webkit-scrollbar-thumb{background:#4338ca;border-radius:99px}
.pp-group{
  position:relative;height:var(--pp-h);
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;
  scroll-snap-align:start;
}
.parallax-bg{
  position:absolute;inset:0;
  transform:translateZ(-1px) scale(2);
  pointer-events:none;
  background-size:cover;background-position:center;
}
.pp-bg-a{background:radial-gradient(circle at 30% 30%,#4338ca,#0b0d14 70%)}
.pp-bg-b{background:radial-gradient(circle at 70% 40%,#be185d,#0b0d14 70%)}
.pp-bg-c{background:radial-gradient(circle at 40% 60%,#0e7490,#0b0d14 70%)}
.pp-foreground{
  /* translateZ(0) pins the card to the scroll plane in front of the pushed-back layer.
     No backdrop-filter: inside a preserve-3d context it makes Chromium drop the element. */
  position:relative;z-index:1;transform:translateZ(0);
  text-align:center;color:#fff;padding:28px 32px;max-width:420px;margin:0 16px;
  background:rgba(11,13,20,.62);border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.pp-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c7cbe0;background:rgba(255,255,255,.08);padding:4px 12px;border-radius:99px;margin-bottom:14px}
.pp-foreground h2{font-size:clamp(22px,4vw,34px);font-weight:800;margin:0 0 10px;letter-spacing:-.02em}
.pp-foreground p{font-size:14px;color:#dfe1ee;margin:0;line-height:1.6}
.pp-scrollcue{
  position:absolute;bottom:18px;left:50%;z-index:1;
  transform:translate3d(-50%,0,0);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  animation:pp-bounce 1.8s ease-in-out infinite;
}
@keyframes pp-bounce{0%,100%{transform:translate3d(-50%,0,0)}50%{transform:translate3d(-50%,6px,0)}}

// This snippet is intentionally CSS-only for the parallax effect itself --
// the perspective + translateZ + scale technique on .parallax-bg layers
// produces the depth illusion purely through the browser's native 3D
// rendering as the .pp-container scrolls. No scroll event listeners or
// rAF loops are needed to drive the effect.
//
// This script only logs a confirmation so the snippet still has a JS
// entry point available; it performs no visual work.
console.log('CSS-only parallax perspective section: no scroll JS required.');