# Hero section design: the first screen of your website

[Canonical HTML page](https://gradiently.design/guide/hero-section-design)

Visitors decide whether to stay before they scroll. The hero is where they decide, so every word and pixel in it should earn its place.

## The short version

- A hero section is the first full screen of a website, and it should say what the product is, who it is for and what to do next.
- The core parts are a headline, a supporting line, one primary call to action and a visual that shows the product or sets the mood.
- Specific headlines that name an outcome work better than slogans that could belong to any company.
- A hero needs one main action; a second, quieter link is fine, but more choices dilute it.
- Design the phone version on purpose, because many visitors see the hero first on a narrow screen.

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](https://gradiently.design/guide/website-hero-background).

## What goes in a hero section

| Part | Job | Typical length |
| --- | --- | --- |
| Eyebrow (optional) | Context or a category: "For independent cafés" | 2 to 5 words |
| Headline | The promise, in the reader's words | 4 to 10 words |
| Supporting line | How it works or what makes it different | One sentence, 15 to 25 words |
| Primary button | The one next step | 2 to 4 words |
| Secondary link (optional) | A lower commitment path: "See how it works" | 2 to 4 words |
| Visual | Show the product, the result or the feeling | One image, video loop or background |

If a part doesn't help the visitor decide whether to stay, it belongs further down the page.

## 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.

| Vague | Specific |
| --- | --- |
| Empowering your growth | Bookkeeping for freelancers, done every Friday |
| The future of coffee | Single origin beans, roasted on Monday, at your door by Thursday |
| Design made simple | Social posts that look like your brand, in every size |
| Your wellness journey starts here | Small group Pilates in Leeds, six people per class |
| Innovative solutions for modern teams | Shared calendars for clinics that hate double bookings |

The specific versions are longer, and that is fine. Clarity beats brevity in a headline.

Keep the supporting line for the how or the proof, not a restatement. For more on wording, [writing copy for visuals](https://gradiently.design/guide/writing-copy-for-visuals) and [visual hierarchy](https://gradiently.design/guide/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.

A centred website hero for a coffee roaster with headline and supporting line over a warm gradient

Centred: the words carry it, the background sets the mood.

A split website hero for clinic scheduling software with text on the left and space for a product image

Split: words on one side, room on the other for a product screenshot.

## 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.

### Avoid

- Three buttons of equal weight
- "Submit", "Learn more" or "Click here"
- A button the same colour as the background
- The button below the fold on a phone
- An autoplaying carousel of different messages

### Do

- One button, one quieter link
- A label that says what happens next
- A button colour used nowhere else on the screen
- Headline and button visible on a 390 px wide phone
- One message, said well

## 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](https://gradiently.design/guide/color-contrast-accessibility) 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](https://gradiently.design/guide/gradient-overlay) and [text on a gradient](https://gradiently.design/guide/text-on-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.

- Desktop 1920×1080: 1920 × 1080
- Laptop 1440×900: 1440 × 900
- Phone 390×844: 390 × 844

The same hero at three common viewport sizes. What fits beside the headline on desktop has to go above or below it on a phone.

```css
.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;
}
```

`svh` sizes to the visible phone screen, `clamp()` scales type between phone and desktop, and `text-wrap: balance` evens out the headline's lines.

## A hero section checklist

1. **Write the headline first** Before choosing images, write five headlines and pick the most specific. The layout follows the words.
2. **Cut to one action** Pick the single next step you want most visitors to take, and make it the only button.
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. **Check legibility everywhere** Resize the browser from wide to narrow and watch the text against the background the whole way.
5. **Keep it fast** The hero image is often the largest thing on the page. Size it properly and serve [WebP or AVIF](https://gradiently.design/guide/webp-images).

The hero opens the page; the rest of the page has to keep the promise. [Landing page design](https://gradiently.design/guide/landing-page-design) covers the sections that follow.

## FAQ

### What is a hero section on a website?

The first full screen of a page, above the fold. It usually holds a headline, a supporting line, a main button and a visual.

### What should a hero section headline say?

What the product does and for whom, in the customer's own words. Specific outcomes beat broad slogans.

### How many buttons should a hero section have?

One primary button. A second, quieter text link for a lower commitment option is fine, but more choices weaken the main one.

### What size should a hero image be?

Design at 1920×1080 for desktop and provide smaller versions for phones through `srcset`, so mobile visitors download a lighter file.

### Should a hero section fill the whole screen?

Not necessarily. A full screen hero suits brand led sites; product sites often benefit from a shorter hero that hints at content below.