11 CSS Parallax Effects
Collection of hand-picked free HTML, CSS and JavaScript parallax effect code examples.
Related Articles
About the code
Mouse Move Parallax
Simple parallax in HTML and CSS with little vanilla JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
About the code
Parallax Effect
Optimised for Google Chrome, some problems appear on Mozilla with background-clip: text;
Compatible browsers: Chrome, Edge, Firefox (partial), Opera, Safari
Responsive: no
Dependencies: -
About the code
Parallax Shadows
Mobile-friendly parallax shadows.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
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!
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
CSS Only Parallax
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
CSS-Only Parallax Effect
No Javascript required. Just plain CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
Parallax Image Gallery
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: rellax.js
About the code
Page Top Parallax
Page top parallax (SVG + CSS Variables).
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, parallax.js
About the code
Parallax Background
Pure CSS background parallax.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
