Hero section design: the first screen of your website

Good hero section design answers three questions before anyone scrolls: what is this, is it for me, and what do I do next. The hero is the first screen of your site, usually a headline, one supporting sentence, a single main button and a visual. Everything else (logos, badges, a second button, a carousel) has to justify the space it takes from those four. This guide covers the words, the layout and the build; for the background alone, see website hero backgrounds.

What goes in a hero section

Writing the hero headline

The headline is the hardest sentence on your site. Clever slogans fail because they could belong to anyone. A good one names who it is for, what they get, or the problem it removes, in words your customers actually use. Read it aloud next to a competitor's homepage: if you could swap them without anyone noticing, it is not specific enough.

Keep the supporting line for the how or the proof, not a restatement. For more on wording, writing copy for visuals and visual hierarchy help.

Three hero layouts that work

• Centred. Headline, line and button stacked in the middle over a background. Strong for brands, launches and products that are a feeling more than a screen.
• Split. Words on the left, product image or screenshot on the right. Best when seeing the product is the argument: apps, physical goods, food.
• Full bleed image or video. A photo or loop fills the screen with words over a calm area. Suits hotels, restaurants, events and portfolios, if legibility is handled properly.

The call to action

One primary button, visually the strongest element after the headline. Label it with what happens next, not a generic verb: "Start a free trial", "Book a table", "See the menu". If you add a secondary option, make it a quieter text link so the two never compete.

Hero backgrounds and legibility

The background is half the impression and the most common reason a hero fails. Busy photos and bright gradients fight the headline, and a dark overlay on everything flattens the mood. Plan a calm area behind the words, keep the busiest detail away from them, and check contrast at every screen width, because the area behind the text moves as the layout reflows.

This is where a Gradiently Mark is useful: its calmest, best contrasting region moves behind your words and the type colour is chosen from its own palette, so the headline reads at 1920×1080 and on a phone without a box or a shadow. For CSS approaches, see gradient overlay and text on a gradient.

Designing the hero for phones

On a phone the hero is narrow and tall, so split layouts stack and full bleed images crop hard. Decide what the phone shows rather than letting it happen: the headline and button should be visible without scrolling, the visual can move below or shrink.

.hero {
  min-height: min(100svh, 56rem);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
}

.hero p {
  max-width: 40ch;
  margin-inline: auto;
}

A hero section checklist

1. 1

   Write the headline first

   Before choosing images, write five headlines and pick the most specific. The layout follows the words.

2. 2

   Cut to one action

   Pick the single next step you want most visitors to take, and make it the only button.

3. 3

   Choose a visual that proves or sets the mood

   A screenshot, a product photo or a background that carries the brand. Not a stock photo of people pointing at laptops.

4. 4

   Check legibility everywhere

   Resize the browser from wide to narrow and watch the text against the background the whole way.

5. 5

   Keep it fast

   The hero image is often the largest thing on the page. Size it properly and serve WebP or AVIF.

The hero opens the page; the rest of the page has to keep the promise. Landing page design covers the sections that follow.