16 CSS Scroll Effects Examples

Table of Contents

1. 3D CSS Scroll

See the Pen <a href="https://codepen.io/shshaw/pen/GRdbZEL" target="_blank" rel="noopener"> 3D CSS Scroll</a> by Shaw (<a href="https://codepen.io/shshaw" target="_blank" rel="noopener">@shshaw</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Shaw
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	No
Responsive	No

2. Horizontal scroller edge fade mask

See the Pen <a href="https://codepen.io/argyleink/pen/qBoryoL" target="_blank" rel="noopener"> Horizontal scroller edge fade mask</a> by Adam Argyle (<a href="https://codepen.io/argyleink" target="_blank" rel="noopener">@argyleink</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Adam Argyle
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	Yes
Responsive	Yes

3. CSS only Scrolling shadow

See the Pen <a href="https://codepen.io/t_afif/pen/bGrPBLJ" target="_blank" rel="noopener"> CSS only Scrolling shadow</a> by Temani Afif (<a href="https://codepen.io/t_afif" target="_blank" rel="noopener">@t_afif</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Temani Afif
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	No

4. Full Screen Vertical Scroll Snap

See the Pen <a href="https://codepen.io/argyleink/pen/yLovWjz" target="_blank" rel="noopener"> Full Screen Vertical Scroll Snap</a> by Adam Argyle (<a href="https://codepen.io/argyleink" target="_blank" rel="noopener">@argyleink</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Adam Argyle
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	No

5. Overlapping horizontal slideshow using position: sticky;

See the Pen <a href="https://codepen.io/havardob/pen/rNjdVjB" target="_blank" rel="noopener"> Overlapping horizontal slideshow using position: sticky; </a> by Håvard Brynjulfsen (<a href="https://codepen.io/havardob" target="_blank" rel="noopener">@havardob</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Håvard Brynjulfsen
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	No
Responsive	Yes

6. Stacking Cards, Final Version

See the Pen <a href="https://codepen.io/bramus/pen/PobmGme" target="_blank" rel="noopener"> 🌟 Stacking Cards, Final Version</a> by Bramus (<a href="https://codepen.io/bramus" target="_blank" rel="noopener">@bramus</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Bramus
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	No

7. CSS Fixed Conic Fill

See the Pen <a href="https://codepen.io/argyleink/pen/wvMxEXM" target="_blank" rel="noopener"> CSS Fixed Conic Fill</a> by Adam Argyle (<a href="https://codepen.io/argyleink" target="_blank" rel="noopener">@argyleink</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Adam Argyle
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

8. Knockout Text Scroll Reveal (Final)

See the Pen <a href="https://codepen.io/blakeeric/pen/MWwGpmR" target="_blank" rel="noopener"> Knockout Text Scroll Reveal (Final)</a> by Blake Eric (<a href="https://codepen.io/blakeeric" target="_blank" rel="noopener">@blakeeric</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Blake Eric
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	No

9. CSS-Only Horizontal Parallax Gallery

See the Pen <a href="https://codepen.io/pehaa/pen/zYxbxQg" target="_blank" rel="noopener"> CSS-Only Horizontal Parallax Gallery</a> by Paulina Hetman (<a href="https://codepen.io/pehaa" target="_blank" rel="noopener">@pehaa</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Paulina Hetman
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

10. Overlapping sections only CSS

See the Pen <a href="https://codepen.io/HenryZarza/pen/VwYagOO" target="_blank" rel="noopener"> Overlapping sections only CSS</a> by Henry Zarza (<a href="https://codepen.io/HenryZarza" target="_blank" rel="noopener">@HenryZarza</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Henry Zarza
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

11. 12 nth Selectors

See the Pen <a href="https://codepen.io/borntofrappe/pen/NWPGvjW" target="_blank" rel="noopener"> 12 nth Selectors</a> by Gabriele Corti (<a href="https://codepen.io/borntofrappe" target="_blank" rel="noopener">@borntofrappe</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Gabriele Corti
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	No
Responsive	Yes

12. Full bleed banner demo

See the Pen <a href="https://codepen.io/thebabydino/pen/JVEKvJ" target="_blank" rel="noopener"> Full bleed banner demo</a> by Ana Tudor (<a href="https://codepen.io/thebabydino" target="_blank" rel="noopener">@thebabydino</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Ana Tudor
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	No
Responsive	No

13. Scrolling Gradient

See the Pen <a href="https://codepen.io/MadeByMike/pen/eKPZZz" target="_blank" rel="noopener"> Scrolling Gradient</a> by Mike (<a href="https://codepen.io/MadeByMike" target="_blank" rel="noopener">@MadeByMike</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Mike
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	Yes
Responsive	No

14. Dual Color Text Scroll Effect

See the Pen <a href="https://codepen.io/raylopro/pen/JOBBrX" target="_blank" rel="noopener"> Dual Color Text Scroll Effect</a> by Raymond Lopez (<a href="https://codepen.io/raylopro" target="_blank" rel="noopener">@raylopro</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Raymond Lopez
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

15. Scrolling half by half pure

See the Pen <a href="https://codepen.io/Kseso/pen/JyEWoP" target="_blank" rel="noopener"> Scrolling half by half pure #CSS by @Kseso</a> by Kseso (<a href="https://codepen.io/Kseso" target="_blank" rel="noopener">@Kseso</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Kseso
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	Yes
Responsive	No

16. CSS background change on scroll

See the Pen <a href="https://codepen.io/giana/pen/PqVbRr" target="_blank" rel="noopener"> CSS background change on scroll</a> by Giana (<a href="https://codepen.io/giana" target="_blank" rel="noopener">@giana</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Giana
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	No
Responsive	Yes