Parallax effect: depth in scrolling and motion design

A parallax effect makes a flat design feel deep by moving its layers at different speeds: the background drifts slowly, the middle a little faster, and the foreground fastest, just as distant hills seem to crawl past a train window while the fence posts race by. On websites it usually happens as you scroll. In motion design it happens over time, in a loop or a video. Either way, the best parallax is small, slow and switched off for anyone who has asked their device for less motion.

How parallax creates depth

Your brain judges distance partly from relative movement. When two layers move at the same speed they read as one flat surface. When one moves more slowly, it reads as further away. Three layers are usually enough to create convincing depth.

Parallax effect in CSS with scroll-driven animations

Modern CSS can tie an animation to scroll position instead of time, using animation-timeline. The browser runs it off the main thread, so it stays smooth, and no JavaScript is needed. Support is still growing: it works in Chromium browsers and recent Safari, so check browser support on MDN and treat the effect as an enhancement. Without support, the page simply doesn't move, which is fine.

.hero {
  position: relative;
  overflow: clip;
  isolation: isolate;          /* keeps the layer inside the hero */
  min-height: 80vh;
  view-timeline: --hero block;
}

.hero__bg {
  position: absolute;
  inset: -15% 0;               /* extra room so edges never show */
  background:
    radial-gradient(circle at 75% 20%, #7c3aed 0%, transparent 45%),
    linear-gradient(170deg, #0f0b1e 0%, #1e1b4b 100%);
  z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__bg {
      animation: hero-depth linear both;
      animation-timeline: --hero;
    }
  }
}

@keyframes hero-depth {
  from { transform: translateY(-10%); }
  to   { transform: translateY(10%); }
}

The size of the movement lives in the keyframes: 10% each way is gentle. Push it beyond 20% and the effect starts to feel like a ride. Moving transform rather than top or background-position keeps it cheap for the browser to draw. CSS gradient performance explains why large animated gradients should move, not repaint.

Other ways to build parallax scrolling

Parallax and reduced motion

For people with vestibular disorders, large movement triggered by scrolling can cause dizziness and nausea. WCAG's guidance on animation from interactions asks that motion like this can be turned off. The simplest way to respect that is to wrap parallax in prefers-reduced-motion: no-preference, as in the code above, so it only runs for visitors who haven't asked for less motion. Prefers reduced motion covers the media query and how to test it.

Parallax in motion design and video

Parallax isn't only for scrolling. In a moving post, a loop or a title sequence, the same rule creates depth over time: a background that drifts slowly, light or particles that move slightly faster, and words that hold still in front. That last part matters. Still words on a gently moving field read as calm and confident, while words that drift too look unsettled.

Particles are a natural middle layer: particle effects shows how small, faint specks moving slightly faster than the background add a second plane of depth. Keep every layer's motion slow and eased; motion design principles explains why.

Designing a parallax hero, step by step

1. 1

   Design it still first

   The hero must look finished with no movement at all, because that's what reduced motion visitors and unsupported browsers will see.

2. 2

   Separate the layers

   Put the background colour field on its own layer, any shapes or photos on a second, and the headline and button on the page itself.

3. 3

   Move only the back layer

   Start with the background alone moving 10% each way. Add a middle layer only if the depth needs it.

4. 4

   Test on a phone

   Check it scrolls smoothly on a mid range phone, and that nothing jumps on iOS Safari.

5. 5

   Turn on reduced motion and check again

   In your system's accessibility settings, ask for reduced motion and confirm the page is calm and complete.

For the background layer itself, a living gradient does more than a flat one. A Gradiently Mark exported as a seamless WebM or MP4 loop with Pro, set behind your hero, gives the page a back layer that is already moving gently and belongs to you alone once claimed. Pair it with hero section design and website hero backgrounds for sizing.