9 CSS Hero Effects
Collection of hand-picked free HTML and CSS hero effect code examples.
Related Articles
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: -
About the code
CSS Star Animation for Hero
Diagonal hero div with CSS star animation background.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
About the code
Stripe Hero
CSS stripe hero from stripe.com.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
Animated Hero Background
An animated hero background, that can be used for portfolio sites.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
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: -
About the code
Hero Experiment
Mix gradients with some colourful background – have yourself some cool hero.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
About the code
Hero Image and CSS Gradient
Hero image with CSS gradient animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
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: -
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: -
