Top 11 CSS Parallax Effects

Collection of hand-picked free HTML, CSS and JavaScript parallax effect code examples.

MOUSE MOVE PARALLAX

Simple parallax in HTML and CSS with little vanilla JavaScript by oscicen.

See the Pen
Mouse Move Parallax ✨
by oscicen (@oscicen)
on CodePen.

Demo and Download

PARALLAX EFFECT

Optimised for Google Chrome, some problems appear on Mozilla with background-clip: text.Made with HTML (Pug) / CSS (Less) / JavaScript by Guilmain Dorian.

See the Pen
Magdiellop 216 recreated with CSS
by Guilmain Dorian (@Craaftx)
on CodePen.

Demo and Download

PARALLAX SHADOWS

Mobile-friendly parallax shadows. Made with HTML / CSS / JavaScript by Janne Aukia.

See the Pen
Parallax Shadows (Mobile-Friendly)
by Janne Aukia (@jaukia)
on CodePen.

Demo and Download

3D CSS PARALLAX DEPTH EFFECT

Playing with CSS translate and rotate transforms based on mousemove (sorry mobile users) to simulate some z-axis depth on the card and individual movie characters. Made with HTML / CSS (SCSS) / JavaScript (Babel) by Adrian Payne.

See the Pen
3D CSS Parallax Depth Effect
by Adrian Payne (@dazulu)
on CodePen.

Demo and Download

IMAGE CUTOUT, PARALLAX EFFECT: CSS + SVG

This works on desktop/laptop, but not on mobile. Make an SVG cutout of the same background color as your background. Make a parallax background with CSS. Use the same proportions as your SVG. Place an img of your SVG inside the HTML for your parallax div. Align and size parallax background as you like. Don’t forget to make things responsive!. Made with HTML / CSS by Alex O’Neal.

See the Pen
Image cutout, parallax effect: CSS + SVG
by Alex O’Neal (@alexoneal)
on CodePen.

Demo and Download

CSS ONLY PARALLAX

Made with HTML (Pug) / CSS (SCSS) by Sil van Diepen.

See the Pen
CSS Only parallax
by Sil van Diepen (@silvandiepen)
on CodePen.

Demo and Download

CSS-ONLY PARALLAX EFFECT

No Javascript required. Just plain CSS. Made with HTML (Pug) / CSS by Yago Estevez.

See the Pen
CSS-Only Parallax Effect
by Yago Estévez (@yagoestevez)
on CodePen.

Demo and Download

PARALLAX IMAGE GALLERY

Made with HTML / CSS / JavaScript by Booligoosh.

See the Pen
Parallax image gallery using Figure & Figcaption – #CodePenChallenge
by Booligoosh (@Booligoosh)
on CodePen.

Demo and Download

PAGE TOP PARALLAX

Page top parallax (SVG + CSS Variables). Made with HTML / CSS (SCSS) / JavaScript (TypeScript) by jakob-e.

See the Pen
Page top parallax
by jakob-e (@jakob-e)
on CodePen.

Demo and Download

PARALLAX GRID

I used parallax.js to set up this interactive panning image grid. Uses cursor position if you’re on a desktop or laptop. Made with HTML / CSS / JavaScript by Casey Callis.

See the Pen
Parallax Grid
by Casey Callis (@caseycallis)
on CodePen.

Demo and Download

PARALLAX BACKGROUND

Pure CSS background parallax. Made with HTML (Pug) / CSS (SCSS) by Ravi Dhiman.

See the Pen
Parallax Background
by Ravi Dhiman (@ravid7000)
on CodePen.

Demo and Download

Praveen Kumar

I am a fullstack web developer with a passion for SEO, creating stunning websites, and organic marketing. I am a perfectionist.

Post navigation