Parallax travel comes from the factor
Parallax builds depth by letting each layer react to scrolling at a different rate. A factor of 1 moves with the content, 0 pins the layer to the viewport, and anything above 1 runs past the content. Enter the scroll distance and a factor per layer to see how many px each one actually travels and the offset to put in your CSS.
How it is calculated
On-screen travel = scroll distance x factor. Drift against the content = scroll distance x (factor - 1). The offset you need = scroll distance x (1 - factor). An element in normal flow already rises by the full scroll distance, so the offset is what you give back through translateY. As of October 2026 the W3C specifications and the accessibility guidelines set no recommended factor.
Limits and accessibility
Momentum scrolling, scroll event latency and layer compositing cost are not part of the result, and the tool does not judge whether a factor is appropriate. Parallax can trigger dizziness, so always respect prefers-reduced-motion: reduce by removing or greatly reducing the movement, and make sure the content still reads without the effect.
Frequently Asked Questions
There is no official recommended factor, so this tool proposes none. Enter your own and it reports how many px each layer travels for a given scroll distance, which is what you tune against.
The layer moves up faster than the content, producing a reverse parallax. The travel against the content is reported as a positive value, and the layer needs that much spare height below.
Respecting prefers-reduced-motion: reduce and switching the layer movement off is the baseline. Paste the CSS block shown in the result to reset transform to none.