Animation · Scroll · 12
Parallax Background Parallax Background = layers that move at different speeds as you scroll, adding depth without leaving the compositor.
Skip to the modify prompt →
Play Pause Replay
Respects prefers-reduced-motion: the animation is disabled and the final state is shown.
How to prompt it Copy Prompt
Basic Modify Advanced
Build a two-layer parallax: back drifts slowly, front faster, both transform-only and scroll-linked via animation-timeline: view().
Reduce the speed gap to near-zero so the depth is subtle and text stays calm.
Drive each layer with its own animation-timeline: view() and animation-range, expose --parallax-depth as a single multiplier, add an @supports fallback that disables parallax, and under prefers-reduced-motion freeze both layers. Keep motion under 16px of travel.
Modify prompts change only the target — the rest of your page stays untouched.
What is a Parallax Background? Parallax fakes depth: a back layer drifts slowly while a front layer moves faster as you scroll, so the scene feels three-dimensional. Keep the speed gap small — too much parallax makes text hard to read and can trigger motion sickness. Native CSS scroll-driven animation keeps it free of scroll handlers.
Animation Specimen
Trigger scroll
Tech scroll-driven
Duration 3s
Easing ease-in-out
Performance transform When to use Hero backgrounds, product storytelling, landing pages Any scene that benefits from a sense of depth Avoid when Text-heavy sections — parallax fights reading Users prone to motion sickness (keep it minimal or off) Small speed gap. Heavy parallax hurts readability and can cause nausea; offer a reduced-motion lock.
Get the code Copy CSS
CSS HTML
.anim-el {
animation-iteration-count: infinite;
animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }
.parallax { width: min(240px, 100%); height: 150px; border-radius: 12px; overflow: hidden; position: relative; background: #0f1226; }
.parallax .par-layer { position: absolute; inset: -20px; }
.parallax .par-back {
background: radial-gradient(60% 60% at 30% 30%, color-mix(in srgb, var(--anim-accent) 70%, transparent), transparent 70%), radial-gradient(50% 50% at 75% 70%, #2a2f5e, transparent 70%);
animation-name: parBack;
animation-duration: var(--anim-duration, 3s);
animation-timing-function: var(--anim-easing, ease-in-out);
}
.parallax .par-front {
background: radial-gradient(40% 40% at 60% 40%, rgba(255, 255, 255, 0.35), transparent 70%);
animation-name: parFront;
animation-duration: var(--anim-duration, 3s);
animation-timing-function: var(--anim-easing, ease-in-out);
}
@keyframes parBack { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes parFront { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } } <div class="parallax">
<div class="par-layer par-back anim-el"></div>
<div class="par-layer par-front anim-el"></div>
</div> Copy and drop it into your project. The motion touches only transform / opacity; colour comes from --anim-accent.
Copy Prompt Build a two-layer parallax: back drifts slowly, front faster, both transform-only and scroll-linked via animation-timeline: view().