Home / Snippets / Color & Theming /
Parallax background
A CSS-only parallax effect using background-attachment: fixed — the gradient background stays fixed while content scrolls over it.
Scroll down inside this container to see the parallax gradient stay fixed while the content layers move.
The background gradient is painted relative to the viewport, not the scroll container, creating depth.
No JavaScript needed — a single CSS property handles the parallax behaviour entirely.
Works best with a translucent content overlay so the shifting background remains visible.
Quick implementation
.parallax {
background: linear-gradient(
135deg,
oklch(0.25 0.12 280) 0%,
oklch(0.35 0.18 250) 30%,
oklch(0.28 0.14 220) 60%,
oklch(0.22 0.10 270) 100%
);
background-attachment: fixed;
background-size: cover;
}
/* Semi-transparent overlay keeps content readable */
.parallax__content {
background: oklch(0.13 0.02 260 / 0.75);
padding: 2rem;
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a CSS visual effects library.
Goal: A parallax background effect using background-attachment: fixed and a CSS gradient — no images, no JavaScript.
Technical constraints:
- Use background-attachment: fixed so the gradient is painted relative to the viewport.
- Use background-size: cover to ensure the gradient fills the viewport at all sizes.
- Use a linear-gradient or radial-gradient with oklch() colors — no hex or rgba().
- Add a semi-transparent content overlay (oklch() with alpha) so text remains readable.
- Wrap the parallax section in a scroll container to demonstrate the depth effect.
Framework variant (pick one):
A) Vanilla CSS — two classes: .parallax for the background layer and .parallax__content for the overlay.
B) React component — accept gradientAngle, colors array, and overlayOpacity as optional props.
Edge cases to handle:
- background-attachment: fixed is ignored inside elements with overflow other than visible on iOS Safari — document this limitation.
- Provide a fallback for mobile: remove background-attachment: fixed at a max-width breakpoint.
- Ensure sufficient contrast between the gradient and any overlaid text (WCAG AA).
Return CSS.Why this matters in 2026
The parallax effect adds visual depth to hero sections, marketing pages, and feature showcases without any JavaScript scroll event listeners. A single CSS property — background-attachment: fixed — achieves what previously required requestAnimationFrame loops and Intersection Observer callbacks. Using a CSS gradient as the background means zero image requests and full design-token integration.
The logic
Normally, a background image scrolls with its element. Setting background-attachment: fixed changes the reference frame: the background is now positioned and clipped relative to the viewport rather than the element. As the user scrolls, the content moves but the gradient stays put — revealing different portions of it like a window sliding over a canvas. background-size: cover ensures the gradient always fills the full viewport regardless of element size.
Accessibility & performance
background-attachment: fixed forces the browser to repaint the background on every scroll frame on some rendering engines, which can hurt performance on low-end devices. Test with the Chrome DevTools Performance panel and consider disabling it for users who prefer reduced motion via @media (prefers-reduced-motion: reduce). On iOS Safari, fixed attachment is silently ignored inside overflow-scrolling containers — always provide a static gradient fallback for mobile using a max-width media query.