# Parallax effect: depth in scrolling and motion design

[Canonical HTML page](https://gradiently.design/guide/parallax-effect)

Parallax borrows a trick from your own eyes: near things move faster than far ones. Used lightly it adds depth to a page or a loop; overdone it makes people feel seasick. Here is how to do it well.

## The short version

- A parallax effect creates depth by moving layers at different speeds, with nearer layers moving faster than distant ones.
- On websites, parallax scrolling can now be built in CSS with scroll-driven animations, without JavaScript, in browsers that support them.
- The older `background-attachment: fixed` technique is ignored by iOS Safari, so it should not be relied on for mobile.
- Large or fast parallax movement can cause discomfort for people with vestibular disorders, so it should be turned off when a visitor prefers reduced motion.
- Subtle parallax, with layers moving only a little, adds depth without distracting from the content.

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.

| Layer | Speed relative to scroll | What goes on it |
| --- | --- | --- |
| Background | Slowest, roughly 10% to 30% of the scroll | A gradient, sky, texture or soft colour field |
| Middle | Medium, around half | Shapes, photos, illustrations |
| Foreground | Normal scroll speed | Headlines, buttons, the actual content |

A simple three layer parallax. Keep the content on the layer that scrolls normally, so reading is never affected.

> **Text stays put** Never put body text or buttons on a moving parallax layer. Words that slide at a different speed from the page are tiring to read and hard to click.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) and treat the effect as an enhancement. Without support, the page simply doesn't move, which is fine.

```css
.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 background layer moves a little as the hero passes through the viewport. It only runs where it's supported and where the visitor hasn't asked for reduced motion.

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](https://gradiently.design/guide/css-gradient-performance) explains why large animated gradients should move, not repaint.

## Other ways to build parallax scrolling

| Method | How it works | Watch out for |
| --- | --- | --- |
| Scroll-driven animations | `animation-timeline: view()` or `scroll()` ties keyframes to scroll | Not yet in every browser; build it as an enhancement |
| `background-attachment: fixed` | The background stays still while content scrolls over it | Ignored by iOS Safari; only one fixed speed |
| CSS 3D perspective | Layers pushed back with `translateZ` scroll more slowly | Fiddly scaling and scroll container setup |
| JavaScript on scroll | A script moves layers as the page scrolls | Can stutter if it runs on every scroll event; use `requestAnimationFrame` |

Four techniques. For a new site, scroll-driven animations are the cleanest choice.

## 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](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) 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](https://gradiently.design/guide/reduced-motion) covers the media query and how to test it.

### Avoid

- Whole sections sliding at different speeds
- Text or buttons on moving layers
- Movement that ignores reduced motion settings
- Scroll hijacking that changes scroll speed
- Parallax on every section of the page

### Do

- One background layer moving a little
- Content on the normal scroll
- Motion only under `no-preference`
- Native scrolling, untouched
- Parallax in one place: usually the hero

## 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.

A widescreen website hero reading Built for the long haul for an outdoor brand, with still type over a slowly moving gradient

A website hero with depth: the background field moves slowly behind still words, so the eye reads the headline first.

Particles are a natural middle layer: [particle effects](https://gradiently.design/guide/particles-effect) 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](https://gradiently.design/guide/motion-design-principles) explains why.

## Designing a parallax hero, step by step

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. **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. **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. **Test on a phone** Check it scrolls smoothly on a mid range phone, and that nothing jumps on iOS Safari.
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.

- Far layer: night sky: `linear-gradient(180deg, #0c1445 0%, #1e3a8a 50%, #60a5fa 100%)`
- Middle layer: horizon glow: `radial-gradient(ellipse at 50% 100%, #f59e0b 0%, #b45309 35%, #1e3a8a 75%)`
- Near layer: dark foreground: `linear-gradient(180deg, #374151 0%, #111827 55%, #0a0a0a 100%)`

Three gradient layers for a parallax hero. Stacked, with the far layer moving least, they read as sky, horizon and foreground.

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](https://gradiently.design/guide/hero-section-design) and [website hero backgrounds](https://gradiently.design/guide/website-hero-background) for sizing.

## FAQ

### What is a parallax effect?

A way of creating depth by moving layers at different speeds, so nearer layers move faster than distant ones, as they do in real life.

### Can I make a parallax effect with only CSS?

Yes. CSS scroll-driven animations tie keyframes to scroll position without JavaScript, in browsers that support `animation-timeline`. Older pure CSS methods use `background-attachment: fixed` or 3D perspective.

### Why doesn't background-attachment: fixed work on iPhone?

iOS Safari ignores fixed background attachment, so the background scrolls normally. Use scroll-driven animations or a transform based technique instead.

### Is parallax scrolling bad for accessibility?

Large scroll-triggered movement can make people with vestibular disorders feel unwell. Keep it subtle and turn it off when a visitor prefers reduced motion.

### Is parallax bad for performance?

Not if you animate `transform` and let the browser drive it with scroll-driven animations. Scripts that move elements on every scroll event are what cause stutter.