32+ CSS Parallax Effects

Are you looking to create background image effects where images move at a different speed than the foreground content as you scroll down a webpage? In this collection, we are featuring the top 32+ HTML and CSS parallax effect code examples that we have garnered from CodePen, GitHub, and other reliable platforms.

Parallax animation is a captivating design technique that adds immersive effects to web pages, enhancing visual appeal, user experience, and engagement. No matter if you’re a web designer or developer, you can use any of our parallax effects from our compilation.

Each parrallax effect quite easily creates an illusion of depth and adds personality to web pages with realistic and advanced interaction techniques. Furthermore, if you know how to play with HTML and CSS, you can customise the parralax scrolling to a greater extent.

Let’s checkout these free CSS Parallax animations and make your site more interactive and engaging.

1. The ‘root element’ parallax technique

See the Pen <a href="https://codepen.io/amustill/pen/AJXYwX"> The ‘root element’ parallax technique</a> by Adam Mustill (<a href="https://codepen.io/amustill">@amustill</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Mustill
Source: Code / Demo
Created on: MARCH 1, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

2. Parallax World of UGG

See the Pen <a href="https://codepen.io/designbyremedy/pen/RwGwvy"> Parallax World of UGG</a> by Andrew (<a href="https://codepen.io/designbyremedy">@designbyremedy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrew
Source: Code / Demo
Created on: APRIL 29, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

3. Parallax Image Gallery

Author: Booligoosh
Source: Code / Demo
Created on: JUNE 25, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. Multi-layered Parallax Illustration

See the Pen <a href="https://codepen.io/patrickwestwood/pen/MyoBaY"> Multi-layered Parallax Illustration </a> by Patrick Westwood (<a href="https://codepen.io/patrickwestwood">@patrickwestwood</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Patrick Westwood
Source: Code / Demo
Created on: MARCH 28, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS), JavaScript(CoffeeScript)

5. Full Page Parallax Scroll Effect

See the Pen <a href="https://codepen.io/eehayman/pen/qdGZJr"> Full Page Parallax Scroll Effect</a> by Emily Hayman (<a href="https://codepen.io/eehayman">@eehayman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Emily Hayman
Source: Code / Demo
Created on: AUGUST 17, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

6. jParallax

See the Pen <a href="https://codepen.io/monkey-company/pen/PKgmNa"> jParallax </a> by Estebanane (<a href="https://codepen.io/monkey-company">@monkey-company</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Estebanane
Source: Code / Demo
Created on: SEPTEMBER 5, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

7. Pure CSS: Parallax

See the Pen <a href="https://codepen.io/andrejsharapov/pen/OqvXyb"> Pure CSS: Parallax (Demix website)</a> by Andrej Sharapov (<a href="https://codepen.io/andrejsharapov">@andrejsharapov</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrej Sharapov
Source: Code / Demo
Created on: MARCH 15, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

8. Sass Parallax Example

See the Pen <a href="https://codepen.io/scottkellum/pen/DeaVmP"> Sass parallax example</a> by Scott Kellum (<a href="https://codepen.io/scottkellum">@scottkellum</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Scott Kellum
Source: Code / Demo
Created on: JANUARY 26, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

9. Header/Footer Parallax Effect

See the Pen <a href="https://codepen.io/hudsonmarinho/pen/kMxPRa"> Header/Footer Parallax Effect</a> by Hudson Marinho (<a href="https://codepen.io/hudsonmarinho">@hudsonmarinho</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hudson Marinho
Source: Code / Demo
Created on: JANUARY 8, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

10. Image Cutout, Parallax Effect

See the Pen <a href="https://codepen.io/alexoneal/pen/OBqaoe"> Image cutout, parallax effect: CSS + SVG</a> by Alex O’Neal (<a href="https://codepen.io/alexoneal">@alexoneal</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex O’Neal
Source: Code / Demo
Created on: OCTOBER 28, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Pure CSS Parallax Header

See the Pen <a href="https://codepen.io/ksksoft/pen/OPKQBP"> Pure css Parallax header</a> by keisuke Takahashi (<a href="https://codepen.io/ksksoft">@ksksoft</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: keisuke Takahashi
Source: Code / Demo
Created on: APRIL 15, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Parallax Photo Columns with CSS Scroll Linked Animations

See the Pen <a href="https://codepen.io/jh3y/pen/jOxJWar"> Parallax Photo Columns w/ CSS Scroll Linked Animations [scroll()]</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JHEY
Source: Code / Demo
Created on: OCTOBER 14, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Page Top Parallax

See the Pen <a href="https://codepen.io/jakob-e/pen/ELqeRM"> Page top parallax</a> by Jakob Eriksen (<a href="https://codepen.io/jakob-e">@jakob-e</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JAKOB ERIKSEN
Source: Code / Demo
Created on: MAY 27, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Typescript)

14. Magdiellop 216 Recreated with CSS

See the Pen <a href="https://codepen.io/Craaftx/pen/yQGpwa"> Magdiellop 216 recreated with CSS</a> by Guilmain Dorian (<a href="https://codepen.io/Craaftx">@Craaftx</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Guilmain Dorian
Source: Code / Demo
Created on: NOVEMBER 30, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Less), JavaScript

15. Parallax Scene with CSS Variables

See the Pen <a href="https://codepen.io/electerious/pen/gLLozQ"> Parallax scene with CSS variables</a> by Tobias Reich (<a href="https://codepen.io/electerious">@electerious</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tobias Reich
Source: Code / Demo
Created on: NOVEMBER 18, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. CSS-Only Horizontal Parallax Gallery

See the Pen <a href="https://codepen.io/pehaa/pen/zYxbxQg"> CSS-Only Horizontal Parallax Gallery</a> by Paulina Hetman (<a href="https://codepen.io/pehaa">@pehaa</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Paulina Hetman
Source: Code / Demo
Created on: JANUARY 24, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Disney Wall Parallax Gallery

See the Pen <a href="https://codepen.io/designfenix/pen/xxWeEQV"> Disney Wall Parallax [Only CSS] #CodePenChallenge – Gallery</a> by Fernando Cohen (<a href="https://codepen.io/designfenix">@designfenix</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Fernando Cohen
Source: Code / Demo
Created on: AUGUST 24, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

18. Parallax Depth Cards

See the Pen <a href="https://codepen.io/andymerskin/pen/XNMWvQ"> Parallax Depth Cards</a> by Andy Merskin (<a href="https://codepen.io/andymerskin">@andymerskin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andy Merskin
Source: Code / Demo
Created on: NOVEMBER 21, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

19. Parallax Star background in CSS

See the Pen <a href="https://codepen.io/sarazond/pen/LYGbwj"> Parallax Star background in CSS</a> by sarazond (<a href="https://codepen.io/sarazond">@sarazond</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: sarazond
Source: Code / Demo
Created on: APRIL 05, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Sass)

20. Castles, Responsive Parallax Landscape

See the Pen <a href="https://codepen.io/Yakudoo/pen/MyMGBX"> Castles, responsive parallax landscape</a> by Karim Maaloul (<a href="https://codepen.io/Yakudoo">@Yakudoo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Karim Maaloul
Source: Code / Demo
Created on: MAY 20, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

21. CSS-Only Parallax Effect

See the Pen <a href="https://codepen.io/yagoestevez/pen/EdgRMX"> CSS-Only Parallax Effect</a> by Yago Estévez (<a href="https://codepen.io/yagoestevez">@yagoestevez</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yago Estévez
Source: Code / Demo
Created on: OCTOBER 07, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. 3D CSS Parallax Depth Effect

See the Pen <a href="https://codepen.io/dazulu/pen/VVZrQv"> 3D CSS Parallax Depth Effect</a> by Adrian Payne (<a href="https://codepen.io/dazulu">@dazulu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adrian Payne
Source: Code / Demo
Created on: NOVEMBER 02, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

23. CSS Parallax Hero

See the Pen <a href="https://codepen.io/hexagoncircle/pen/OJyPygv"> CSS Parallax Hero</a> by Ryan Mulligan (<a href="https://codepen.io/hexagoncircle">@hexagoncircle</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ryan Mulligan
Source: Code / Demo
Created on: APRIL 10, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS)

24. Firewatch Parallax In CSS

See the Pen <a href="https://codepen.io/samdbeckham/pen/OPXPNp"> Firewatch Parallax in CSS</a> by Sam Beckham (<a href="https://codepen.io/samdbeckham">@samdbeckham</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sam Beckham
Source: Code / Demo
Created on: DECEMBER 16, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. Parallax Animation Hero

See the Pen <a href="https://codepen.io/landrik/pen/jrYPbx"> Parallax animation hero</a> by Landrik (<a href="https://codepen.io/landrik">@landrik</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Landrik
Source: Code / Demo
Created on: JULY 14, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

26. CSS3 Horizontal Parallax

See the Pen <a href="https://codepen.io/danbhala/pen/GJGQad"> 8-Bit CSS3 Horizontal Parallax</a> by Dan Stuart (<a href="https://codepen.io/danbhala">@danbhala</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dan Stuart
Source: Code / Demo
Created on: JULY 15, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

27. Simple Image Tag Parallax

See the Pen <a href="https://codepen.io/RenanB/pen/GZeBNg"> Simple Image Tag Parallax</a> by Renan Breno (<a href="https://codepen.io/RenanB">@RenanB</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Renan Breno
Source: Code / Demo
Created on: MAY 12, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

28. Pure CSS Parallax Effect

See the Pen <a href="https://codepen.io/tribex/pen/mWNWdz"> Pure CSS Parallax Effect</a> by Joshua Bemenderfer (<a href="https://codepen.io/tribex">@tribex</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joshua Bemenderfer
Source: Code / Demo
Created on: APRIL 10, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

29. Parallax Scroll Animation

See the Pen <a href="https://codepen.io/isladjan/pen/abdyPBw"> Parallax scroll animation</a> by isladjan (<a href="https://codepen.io/isladjan">@isladjan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: isladjan
Source: Code / Demo
Created on: JUNE 28, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

30. Pure CSS Parallax Scrolling

See the Pen <a href="https://codepen.io/keithclark/pen/ndEygj"> Pure CSS Parallax Scrolling</a> by Keith Clark (<a href="https://codepen.io/keithclark">@keithclark</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Keith Clark
Source: Code / Demo
Created on: JANUARY 21, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

31. Pure CSS Parallax Scrolling

32. Parallax Scrolling Effect CSS

See the Pen <a href="https://codepen.io/thecodingpie/pen/JjGJMMB"> Parallax Scrolling Effect CSS</a> by thecodingpie (<a href="https://codepen.io/thecodingpie">@thecodingpie</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: thecodingpie
Source: Code / Demo
Created on: JUNE 25, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

33. Parallax Slideshow

See the Pen <a href="https://codepen.io/bcarvalho/pen/WXmwBq"> Parallax Slideshow</a> by Bruno Carvalho (<a href="https://codepen.io/bcarvalho">@bcarvalho</a>) on <a href="https://codepen.io">CodePen</a>. Author: Bruno Carvalho
Source: Code / Demo
Created on: DECEMBER 4, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)