Collection of hand-picked free HTML and CSS hero effect code examples from Codepen, GitHub and other resources. Update of April 2021 collection. 8 new items.
Related Articles
Links
Made with
- HTML / CSS (SCSS)
About a code
Hero Appearance - CSS Only
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Hero Image Staggered Hover Zoom Effect - CSS Only
CSS only. This probably shouldn't be used on a production site, just for fun.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Home Hero Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Hero Image Reveal
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Travel Site Hero
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
National Geographic Hero Idea
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Flex Items
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
CSS Parallax Hero
Parallax effect created with CSS transforms and perspective properties.
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Easter Hero
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Website Hero
Just playing around with position sticky for some fun scrolling effects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Heroes in the Spotlight
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Hero - 3 Designs
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Dual Picture Hero
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Hero Waves
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Hero Animation
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Hero Article
Using Grid to layout an article hero card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Hero Module with Flexbox and the 'vh' Unit
The hero is a widely used module. This version is created with modern techniques like flexbox and the vh unit. Flexbox and the vh unit makes it possible to create this module with less code.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
CSS Star Animation for Hero
Diagonal hero div with CSS star animation background.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Stripe Hero
CSS stripe hero from stripe.com.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Parallax Background Hero
Multiple background images with CSS3 animation create a multi-depth parallax effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JavaScript
About the code
Animated Hero Background
An animated hero background, that can be used for portfolio sites.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (PostCSS)
About the code
Animated Hero Image with CSS Clipping
Animated with CSS and applied CSS fixed item clipping to get subtle animation.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Hero Experiment
Mix gradients with some colourful background – have yourself some cool hero.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Hero Image and CSS Gradient
Hero image with CSS gradient animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Headings/Hero Image Typography Playground
Explanation is at the top of CSS file. Just some typefaces, helper classes and few presets for easily testing headings typography.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Tinted Hero
A quick way to tint a typical hero in websites. Just use a pseudo class instead of another div.tint:
.hero:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 7, 100, .6); }
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -