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: -