Parallax Background

A background image or layer that moves vertically at a slower rate than the foreground content as the user scrolls, creating a 3D depth effect.

Live Demo

Hero Section

The background image scrolls slightly slower than this foreground text, creating depth.

Content Block

This grounds the scrolling experience by moving at normal speed.

What It Is

A background image or layer that moves vertically at a slower rate than the foreground content as the user scrolls, creating a 3D depth effect.

✓When to Use

Landing page hero sections
Long editorial articles

✕When NOT to Use

Text-heavy application UIs (can cause slight nausea/distraction)

Configuration Tips

01Use Framer Motion useScroll and useTransform for performant JS parallax, or CSS background-attachment: fixed for simple implementations

You've Seen It In

Apple Product PagesStripe

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Add a parallax scroll effect to the hero image so it moves slower than the text.

Code Example (Tailwind CSS)

export function ParallaxBackgroundDemo() {}

Related Effects

Scroll Reveal / Fade-Up on Scroll

Elements remain hidden until they enter the browser viewport, then smoothly fade in and slide up into position. Makes scrolling feel like an active discovery process.