Scroll the preview
Each of the three layers moves at its own speed as you scroll.
CSS Parallax Scroll Generator
Scroll the preview to see three layers move at different speeds. Tune each speed, then copy the ready-to-use CSS and JavaScript.
Back layer
Middle layer
Front layer ↓ scroll me ↓
Ready-to-use CSS + JS
How it works
Adjust the speeds
Lower values feel farther away; higher values feel closer to the viewer.
Copy the snippet
Get the matching CSS and a small scroll-listener script for your own layers.
FAQ
How does the parallax motion work?
A scroll listener reads the container's scroll position and applies a CSS transform: translateY() to each layer, multiplied by that layer's own speed factor, so layers move at different rates.
Why do background layers move slower?
A lower speed factor (like 0.2) moves a layer less per pixel scrolled, which reads as farther away, mimicking real-world depth perception.
Will this affect scroll performance?
The snippet only updates transform, which is cheap for the browser to animate, so it stays smooth on most devices.