OneTaskBy Tim King · Updated
CSS Parallax Scrolling Builder
Scroll-Driven Layers Moving at Their Own Speeds, Set Depth and Copy the Code
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Parallax Builder works
CSS parallax scrolling makes background layers move at a different speed from the page as you scroll, which gives a flat section a sense of depth. Set the heading, colours and the depth of each layer, scroll the preview, and copy HTML and CSS that needs no JavaScript.
Parallax used to need a scroll listener that moved layers on every frame, which was easy to make janky. Modern browsers can link an animation directly to scroll position, so the effect now runs smoothly off the main thread.
How this css parallax scrolling works
Each decorative layer runs the same parallax keyframes, which move it from minus its depth to
plus its depth. animation-timeline: view() ties that animation to the section's journey through
the viewport instead of to time, so a layer with a larger depth travels further and appears
farther away. The heading has no animation and scrolls with the page, which is what makes the
layers behind it feel deep.
Browser support and fallbacks
Scroll-driven animations are wrapped in @supports, so browsers without them show a still,
layered scene that looks finished. The motion is also skipped for visitors who ask for reduced
motion, which matters for parallax because it can trigger motion sickness.
FAQ
Can I use images for the layers?
Yes. Replace each layer's gradient background with url(layer.png) and background-size: cover.
Transparent PNG or WebP layers, such as mountains in front of a sky, give the strongest depth.
Why do the layers extend beyond the section?
The inset: -25% 0 rule makes each layer taller than the section, so when it slides up or down
there is always artwork behind the heading. Increase the inset if you raise the depth and see
gaps at the edges.
Does this parallax work in every browser?
The motion works in browsers that support scroll-driven animations, including Chrome, Edge and recent Safari. Others show the same scene without movement, so nobody sees a broken layout.
How do I make a layer move in the opposite direction?
Use a negative depth, such as --depth: -60px. That layer then moves against the scroll and
appears to sit in front of the page rather than behind it.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Scroll Animation
Preview scroll reveal effects and copy the CSS or JS.
Reading Progress Bar
Make a scroll progress bar for articles and copy the CSS and JS.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Fade-In Generator
Generate a CSS fade-in animation with delay, easing and blur.
Staggered Animation Builder
Make list items animate in one after another with CSS.