40+ CSS Hero Effects

A hand-picked collection of 40+ HTML and CSS hero effect examples sourced from Codepen, and GitHub for web designers and developers at absolutely zero cost.

1. Blend-Mode Sticky Nav & Hero

See the Pen <a href="https://codepen.io/jalinb/pen/ExOgOBZ"> Blend-Mode Sticky Nav & Hero</a> by Jalin Burton (<a href="https://codepen.io/jalinb">@jalinb</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jalin Burton
Source: Code / Demo
Created on: June 22, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS), JavaScript

2. Hero Experiment

See the Pen <a href="https://codepen.io/screeny05/pen/mVmyeQ"> hero experiment</a> by Screeny (<a href="https://codepen.io/screeny05">@screeny05</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Screeny
Source: Code / Demo
Created on: January 7, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

3. CSS – Hero Header

See the Pen <a href="https://codepen.io/OB-1/pen/JYXpgW"> 7. CSS – Hero Header – Responsive Bg Image (Banner)</a> by OB1 (<a href="https://codepen.io/OB-1">@OB-1</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: OB1
Source: Code / Demo
Created on: September 18, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. Travel Site Hero

See the Pen <a href="https://codepen.io/andrewrock/pen/NWvaexx"> Travel site hero</a> by Andrew (<a href="https://codepen.io/andrewrock">@andrewrock</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrew
Source: Code / Demo
Created on: November 01, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. Responsive Hero with Dark Mode

See the Pen <a href="https://codepen.io/syrizaldev/pen/eYrddze"> Responsive Hero with Dark Mode</a> by Syahrizal (<a href="https://codepen.io/syrizaldev">@syrizaldev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Syahrizal
Source: Code / Demo
Created on: September 13, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

6. Animated Hero Background

See the Pen <a href="https://codepen.io/sidthesloth92/pen/zqgxPL"> Animated Hero Background</a> by Dinesh Balaji (<a href="https://codepen.io/sidthesloth92">@sidthesloth92</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dinesh Balaji
Source: Code / Demo
Created on: May 22, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JS

7. Hero Image

See the Pen <a href="https://codepen.io/nxworld/pen/OVMzaP"> Demo: Hero Image × CSS Gradient #2</a> by Naoya (<a href="https://codepen.io/nxworld">@nxworld</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Naoya
Source: Code / Demo
Created on: May 11, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. Hero effect–Magazine

See the Pen <a href="https://codepen.io/cdcampbell26/pen/EPeGwy"> Hero effect–Magazine</a> by Cameron Campbell (<a href="https://codepen.io/cdcampbell26">@cdcampbell26</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cameron Campbell
Source: Code / Demo
Created on: February 5, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

9. Hero Appearance – CSS Only

See the Pen <a href="https://codepen.io/bvg-studio/pen/vYjoxEK"> Hero appearance – CSS Only</a> by Bertrand Vanderdonckt (<a href="https://codepen.io/bvg-studio">@bvg-studio</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bertrand Vanderdonckt
Source: Code / Demo
Created on: October 21, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

10. CSS Hero image

See the Pen <a href="https://codepen.io/geordieF/pen/OMjdbK"> CSS Hero image</a> by Geordie Fischer (<a href="https://codepen.io/geordieF">@geordieF</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Geordie Fischer
Source: Code / Demo
Created on: January 14, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), JavaScript

11. Hero Animation

See the Pen <a href="https://codepen.io/nichola-hudson/pen/NJmOWm"> Hero animation</a> by Nichola (<a href="https://codepen.io/nichola-hudson">@nichola-hudson</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nichola
Source: Code / Demo
Created on: March 26, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

12. Full-Width Hero with Image Using Flexbox

See the Pen <a href="https://codepen.io/brianhaferkamp/pen/OXQoxL"> Full-Width Hero with Image Using Flexbox</a> by Brian Haferkamp (<a href="https://codepen.io/brianhaferkamp">@brianhaferkamp</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Brian Haferkamp
Source: Code / Demo
Created on: July 19, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Hero Module With Flexbox And The ‘vh’ Unit

See the Pen <a href="https://codepen.io/woutervanderzee/pen/GOPyYO"> Hero module with Flexbox and the ‘vh’ unit</a> by Wouter van der Zee (<a href="https://codepen.io/woutervanderzee">@woutervanderzee</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: man Wouter van der Zee
Source: Code / Demo
Created on: December 1, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. ACME Classic Monster Movie Showcase

See the Pen <a href="https://codepen.io/sjvarnum/pen/KKdwJOR"> ACME Classic Monster Movie Showcase</a> by Shane Varnum (<a href="https://codepen.io/sjvarnum">@sjvarnum</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shane Varnum
Source: Code / Demo
Created on: April 11, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Tinted Hero

See the Pen <a href="https://codepen.io/luishj/pen/AzyzEm"> Tinted Hero</a> by Luis Herrero (<a href="https://codepen.io/luishj">@luishj</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Luis Herrero
Source: Code / Demo
Created on: December 7, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. Hero Scroll Down Effect

See the Pen <a href="https://codepen.io/Satsangi_itika/pen/oOwymV"> Hero Scroll Down Effect</a> by Itika (<a href="https://codepen.io/Satsangi_itika">@Satsangi_itika</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Itika
Source: Code / Demo
Created on: April 12, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

17. Home Hero Animation

See the Pen <a href="https://codepen.io/CiTA/pen/RwLZZXB"> Home hero animation, ver1</a> by Silvestar Bistrović (<a href="https://codepen.io/CiTA">@CiTA</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Silvestar Bistrović
Source: Code / Demo
Created on: December 21, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

18. Open-Props – Example Hero Section

See the Pen <a href="https://codepen.io/argyleink/pen/porzeyz"> Open-Props – Example Hero Section</a> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Argyle
Source: Code / Demo
Created on: OCtober 8, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. National Geographic Hero Idea

See the Pen <a href="https://codepen.io/andrewrock/pen/mdwKywd"> Nat Geo Header</a> by Andrew (<a href="https://codepen.io/andrewrock">@andrewrock</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrew
Source: Code / Demo
Created on: September 21, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

20. Development Pattern: Inner Div

See the Pen <a href="https://codepen.io/brianhaferkamp/pen/WNeGLQY"> Development Pattern: Inner Div</a> by Brian Haferkamp (<a href="https://codepen.io/brianhaferkamp">@brianhaferkamp</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Brian
Source: Code / Demo
Created on: August 20, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SASS)

21. Hero Image Staggered Hover Zoom Effect

See the Pen <a href="https://codepen.io/TheMOZZARELLA/pen/GRQmZoo"> Hero Image Staggered Hover Zoom Effect — CSS Only</a> by MOZZARELLA (<a href="https://codepen.io/TheMOZZARELLA">@TheMOZZARELLA</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: mozzarella
Source: Code / Demo
Created on: May 18, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Lines Hero Effect

See the Pen <a href="https://codepen.io/shamaleyte/pen/zYXbLGN"> Lines Hero Effect</a> by shamaleyte (<a href="https://codepen.io/shamaleyte">@shamaleyte</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: shamaleyte
Source: Code / Demo
Created on: April 26, 2024
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

23. Headings/Hero Image Typography Playground

See the Pen <a href="https://codepen.io/fluxus/pen/jEwaYK"> Headings/Hero image typography playground</a> by Mirko Zorić (<a href="https://codepen.io/fluxus">@fluxus</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mirko Zorić
Source: Code / Demo
Created on: January 25, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Office UI Hero Section

See the Pen <a href="https://codepen.io/garybyrne1/pen/JjYJGaJ"> Office UI Hero Section</a> by Gary Byrne (<a href="https://codepen.io/garybyrne1">@garybyrne1</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gary Byrne
Source: Code / Demo
Created on: April 28, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. Tailwind CSS Hero Component

See the Pen <a href="https://codepen.io/dangayle/pen/xvRwdp"> Tailwind CSS Hero Component</a> by Dan Gayle (<a href="https://codepen.io/dangayle">@dangayle</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dan Gayle
Source: Code / Demo
Created on: July27, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. Hero 3 Designs

See the Pen <a href="https://codepen.io/ktich/pen/gOaYYPm"> Hero Challenge – 3 designs (click buttons to see)</a> by ktich (<a href="https://codepen.io/ktich">@ktich</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ktich
Source: Code / Demo
Created on: April 07, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

27. Animated Hero Image With CSS Clipping

See the Pen <a href="https://codepen.io/mihaeltomic/pen/EKPwoq"> Animated hero image with CSS clipping</a> by Mihael Tomić (<a href="https://codepen.io/mihaeltomic">@mihaeltomic</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mihael Tomić
Source: Code / Demo
Created on: March 07, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

28. Be a hero.

See the Pen <a href="https://codepen.io/jesusrmz/pen/OJyWRZV"> Be a hero.</a> by Jesus Ramirez (<a href="https://codepen.io/jesusrmz">@jesusrmz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jesus Ramirez
Source: Code / Demo
Created on: April 23, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

29. 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)

30. Webpage Hero header – scroll effects

See the Pen <a href="https://codepen.io/EricPorter/pen/MeQwWG"> Webpage Hero header – scroll effects</a> by Eric Porter (<a href="https://codepen.io/EricPorter">@EricPorter</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eric Porter
Source: Code / Demo
Created on: July 18, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

31. The Perfect Hero Image

See the Pen <a href="https://codepen.io/katstar01/pen/adZgdY"> The Perfect Hero Image</a> by Katherine (<a href="https://codepen.io/katstar01">@katstar01</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Katherine
Source: Code / Demo
Created on: December 23, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

32. Balanced hero headline component

See the Pen <a href="https://codepen.io/argyleink/pen/VwGrqPY"> Balanced hero headline component</a> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Argyle
Source: Code / Demo
Created on: March 10, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

33. Diagonal Hero Div With CSS Star Animation Background

See the Pen <a href="https://codepen.io/mindsculpt/pen/JJWEJE"> Diagonal Hero Div With CSS Star Animation Background</a> by Michael Becker (<a href="https://codepen.io/mindsculpt">@mindsculpt</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Michael Becker
Source: Code / Demo
Created on: June 19, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

34. Dual Picture Hero

See the Pen <a href="https://codepen.io/Bartjo/pen/GRgMXgO"> dual picture hero</a> by Bart (<a href="https://codepen.io/Bartjo">@Bartjo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bart
Source: Code / Demo
Created on: January 01, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

35. Hero with interactive snowflakes

See the Pen <a href="https://codepen.io/camilleguy/pen/rNOBqKg"> Hero with interactive snowflakes</a> by Camille Guy (<a href="https://codepen.io/camilleguy">@camilleguy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Camille Guy
Source: Code / Demo
Created on: April 8, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

36. CSS Hero Image with Heading

See the Pen <a href="https://codepen.io/action360ca/pen/GQBada"> Full-Width Responsive CSS Hero Image with Heading + Caption + Button + Popup</a> by Andre (<a href="https://codepen.io/action360ca">@action360ca</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andre
Source: Code / Demo
Created on: February 24, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

37. Responsive Hero Section with Navigation Menu

See the Pen <a href="https://codepen.io/syrizaldev/pen/QWmdGwe"> Responsive Hero Section with Navigation Menu</a> by Syahrizal (<a href="https://codepen.io/syrizaldev">@syrizaldev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Syahrizal
Source: Code / Demo
Created on: July 16, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

38. Easter Hero

See the Pen <a href="https://codepen.io/hourwinner/pen/VwvwgWw"> Easter hero – CodePen Challenge</a> by Johana Morales (<a href="https://codepen.io/hourwinner">@hourwinner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Johana Morales
Source: Code / Demo
Created on: April 10, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

39. Website Hero

See the Pen <a href="https://codepen.io/designcouch/pen/dyYbwYq"> Codepen Challenge – Website Hero</a> by Jesse Couch (<a href="https://codepen.io/designcouch">@designcouch</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jesse Couch
Source: Code / Demo
Created on: April 08, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

40. Rays background

See the Pen <a href="https://codepen.io/DedaloD/pen/qBgmovJ"> Rays background</a> by Dennys Dionigi (<a href="https://codepen.io/DedaloD">@DedaloD</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dennys Dionigi
Source: Code / Demo
Created on: November 10, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

41. Double Hero Image & Text Positioning

See the Pen <a href="https://codepen.io/miXTim/pen/rgrbPv"> Double Hero image&Text positioning</a> by Juande M.R. [miXTim] (<a href="https://codepen.io/miXTim">@miXTim</a>) on <a href="https://codepen.io">CodePen</a>. Author: Juande M.R. [miXTim]
Source: Code / Demo
Created on: May 29, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS