35+ CSS Hero Effects - Free Code + Demos

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.

stripped down version of Stripe.com's hero for educational purposes.

An animated hero background, that can be used for portfolio sites

Animated with CSS and applied CSS fixed item clipping to get subtle animation.

Mix gradients with some colourful background – have yourself some cool hero

Explanation is at the top of CSS file. Just some typefaces, helper classes and few presets for easily testing headings typography.

A quick way to tint a typical hero in websites. Just use a pseudo class instead of another div: .hero:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 7, 100, .6); }

Full-Width Responsive CSS Hero Image with Heading + Caption + Button + Popup

Hero image with Fluid Parameters

From the course: https://cssanimation.rocks/courses/animation-101/

This Pen requires jQuery and Vide (http://vodkabears.github.io/vide/).

Hero image with simple text positioning. I'm glad to share with you my first pen :) just a little CSS exercise

A full-width hero section with background image using flexbox to center the content over the image. It's responsive to the viewport height and width using vh and vw. The content includes a ghost button.

Background image will resize depending on browser width

Should work across modern browsers. No media queries to be responsive.

The ui_gradient instagram page set out a challenge to design an office website hero section. After completing the task in figma, I decided to code it here.

The inner div is a very common development pattern I use for controlling content inside a section. I made a video tutorial showing some example usage:

A full-screen landing page header with background image, navigation, and intro text. I did a video tutorial showing how I made it: https://youtu.be/ld2wl4zQG_w

Use the clip-path property to create fixed position hero sections