12 CSS Hero Effects
Collection of hand-picked free HTML and CSS hero effect code examples. Update of December 2018 collection. 3 new items.
Related Articles
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 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 (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: -