Collection of hand-picked free HTML and CSS hero effect code examples.

9 CSS Hero Effects

Collection of hand-picked free HTML and CSS hero effect code examples.

Related Articles

  1. CSS Header and Footers

Demo image: Hero Module with Flexbox and the 'vh' Unit

Author

  • Wouter van der Zee

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: -

Demo image: CSS Star Animation for Hero CSS Star Animation for Hero - GIF Demo

Author

  • Michael Becker

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: -

Demo image: Stripe Hero

Author

  • chickennate

Made with

  • HTML / CSS

About the code

Stripe Hero

CSS stripe hero from stripe.com.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Hero Background

Author

  • Dinesh Balaji

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: -

Demo image: Animated Hero Image with CSS Clipping

Author

  • Mihael Tomić

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: -

Demo image: Hero Experiment

Author

  • Screeny

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: -

Demo image: Hero Image and CSS Gradient

Author

  • Naoya

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: -

Demo image: Headings/Hero Image Typography Playground

Author

  • Mirko Zorić

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: -

Demo image: Tinted Hero

Author

  • Luis Herrero

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: -

back to top