Tailwind UI Pattern Registry for humans and agents

parallax scroll depth perspective 3d layers css-only hero section with layered depth full-page immersive landing atmospheric background with foreground content background feels glued to foreground on scroll need parallax without JavaScript overhead want depth cue that works at scroll speed

Parallax Layers

Fetch snippet JSON: curl https://webspire.de/snippets/depth/parallax-layers.json
Format

Depth

Depth stack

Stage Background
Customize

Quick Start

<div class="parallax-root"><div class="parallax-group"><div class="parallax-layer parallax-layer--back">BG</div><div class="parallax-layer parallax-layer--fore">Content</div></div></div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
720 bytes · 38 lines
Custom Properties
--parallax-perspective
Classes
.parallax-root.parallax-group.parallax-layer.parallax-layer--back.parallax-layer--mid.parallax-layer--fore
parallax scroll depth perspective 3d layers css-only

Uses CSS perspective on the scroll container (.parallax-root) and translateZ + compensating scale() on layers. This is a pure CSS technique — the browser handles parallax depth without any scroll event listeners.

Layer speeds: --back scrolls at 1/3 speed, --mid at 1/2, --fore at full speed.

.parallax-root must be the scroll container — not body or html. Set a fixed height.

Hero with layered depth

<div class="parallax-root" style="height: 100vh;">
  <div class="parallax-group" style="height: 100vh;">

    <!-- Background: scrolls slowest -->
    <div class="parallax-layer parallax-layer--back"
      style="background: linear-gradient(180deg, oklch(20% 0.05 270), oklch(10% 0.02 270));">
    </div>

    <!-- Midground: stars / floating shapes -->
    <div class="parallax-layer parallax-layer--mid"
      style="display: flex; align-items: center; justify-content: center;">
      <div style="width:8rem; height:8rem; border-radius:50%; background: oklch(60% 0.2 280 / 0.3); filter: blur(40px);"></div>
    </div>

    <!-- Foreground: main content -->
    <div class="parallax-layer parallax-layer--fore"
      style="display: flex; align-items: center; justify-content: center;">
      <h1 style="color: white; font-size: 4rem; font-weight: 900;">Deep</h1>
    </div>

  </div>
</div>