15 Beautiful CSS-Based Website Heroes

A hero on a website is the large, often graphic-based, top portion of a homepage underneath the header. For example, the sliding featured portion of my own homepage, is my site’s hero.

This section of a website is called a hero, mainly because it’s one of the first things a new visitor sees upon coming to the site and is often what grabs their attention and makes them stay to look around. Thus that section is a “hero” for saving your site’s day. (dorky, I know)

What makes a hero successful? A beautiful design for sure, but a large call-to-action, tagline or some kind of purpose to the site is really what the hero is for.

Let’s take a look at 15 beautiful uses of the hero on the web today.