Parallax Effect Calculator
Build multi-layer parallax with per-layer speed and depth, feel it in a live scrollable preview, and export the pure-CSS perspective technique, a vanilla-JS scroll script, or a React component — with reduced-motion guards built in.
About this ToolHow it works, benefits & use casesTap to collapse
Parallax is the trick of moving background and foreground elements at different speeds as the user scrolls, which fakes a sense of depth. This calculator builds that effect for you across the two real-world techniques: the pure-CSS perspective approach, which pushes each layer back in 3D space with translateZ and counter-scales it so the browser composites everything on the GPU with zero JavaScript, and the JavaScript scroll approach, which moves layers with a passive scroll listener and requestAnimationFrame for maximum flexibility. Add as many layers as you need, give each one a speed (0 means a fixed background, 1 scrolls with the page, and anything higher races ahead as a foreground) and a z-index, then watch the live scrollable preview react in real time. When the look is right, export a self-contained CSS-perspective snippet, a vanilla-JS script, or a drop-in React component — each one with an optional prefers-reduced-motion guard so you do not make motion-sensitive users sick.
How to Use
- 1Start from a preset (Hero background, Layered hills, Floating cards, or Starfield depth) or the default three-layer setup.
- 2Pick a technique: CSS perspective for a no-JS GPU effect, JS scroll for flexibility, or React for a drop-in component.
- 3Edit the layer list — rename layers, set each speed (0 = fixed, 1 = normal, >1 = foreground) and z-index, and add or remove layers.
- 4Tune the perspective (CSS technique) and the container height, then toggle the disable-on-mobile and reduced-motion guards.
- 5Scroll inside the live preview box to feel the depth, then copy, download, or share the generated code.
Key Benefits
- Covers both the pure-CSS perspective technique and the JS scroll-driven technique from one config
- Live scrollable preview so you feel the parallax without scrolling the whole page
- Per-layer speed and z-index with an intuitive 0-to-1+ speed convention
- Exports a self-contained CSS snippet, a vanilla-JS script, or a React component
- Built-in prefers-reduced-motion and optional mobile guards for accessible, jank-free motion
- JS output uses a passive scroll listener plus requestAnimationFrame to stay smooth
- Shareable URL state so a teammate can open the exact same parallax setup
Common Use Cases
- Adding a depth-layered hero section to a landing page
- Building a scenic multi-layer background (hills, clouds, stars) that drifts on scroll
- Creating floating-card or badge effects that move at different rates
- Prototyping a scroll experience before wiring it into a real component
- Generating an accessible React parallax component that honors reduced-motion
Layers move at different speeds as you scroll the box above. Slower (lower speed) layers read as further away.
Pure CSS, no JavaScript. GPU-composited via translateZ + scale.
Copy, download, share, or pipe to another tool
<div class="parallax">
<div class="parallax__layer parallax__layer--background"><!-- Background --></div>
<div class="parallax__layer parallax__layer--midground"><!-- Midground --></div>
<div class="parallax__layer parallax__layer--foreground"><!-- Foreground --></div>
</div>
<style>
.parallax {
height: 130vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1000px;
perspective-origin: 0 0;
}
.parallax__layer {
position: absolute;
inset: 0;
transform-origin: 0 0;
}
.parallax__layer--background {
z-index: 1;
transform: translateZ(700px) scale(0.3);
}
.parallax__layer--midground {
z-index: 2;
transform: translateZ(400px) scale(0.6);
}
.parallax__layer--foreground {
z-index: 3;
transform: translateZ(0px) scale(1);
}
/* Always honor users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
.parallax,
.parallax [data-parallax-speed] {
transform: none !important;
perspective: none !important;
}
}
</style>Tips
- The translateZ + scale technique is GPU-composited and stays smooth because the browser never recalculates layout on scroll.
- A scrolling parent with `perspective` must be `overflow-y: auto`; child layers are positioned absolutely inside it.
- Always honor prefers-reduced-motion — vestibular motion can make some users physically ill.
- Consider disabling parallax on small touch screens where the effect is harder to perceive and easier to make janky.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- CSS FormatterFormat and beautify CSS code
- CSS MinifierMinify CSS code
- Component Name GeneratorTurn a description into ranked, kind-aware component names with a file scaffold and a name validator (casing, collisions, clarity)
- SVG to React ComponentConvert SVG to a clean TSX/JSX/React Native component — currentColor, prop spread, forwardRef, memo, live preview
- Unused CSS DetectorFind CSS selectors never matched by your HTML, see how many bytes you can save, and get cleaned CSS - with a safelist for dynamic classes
- View Transitions CSS GeneratorGenerate cross-document @view-transition CSS and the startViewTransition() JS path — with a live preview
The CSS perspective technique uses a parent with a perspective value and pushes each layer back in 3D with translateZ, then scales it up to stay full-size. It runs entirely on the GPU compositor with no JavaScript, so it is very smooth. The JS scroll technique listens for scroll events and sets each layer's transform directly, which is more flexible (you can drive any property) but you have to be careful about performance.
Speed controls how fast a layer moves relative to the page. A speed of 0 is a fixed background that stays put, 1 means the layer scrolls at the same rate as the page (no parallax offset), and a value above 1 makes the layer race ahead as a foreground element. Slower layers read as further away, which is what creates the illusion of depth.