HTML Template with Hero Section 2026

Hero Section Code — Copy & Paste

The exact hero pattern used in UIXDraft templates — gradient text, subheadline, dual CTA, responsive:

/* ── CSS ──────────────────────── */
.hero { padding: 80px 20px; text-align: center; }
.hero h1 {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em;
}
.hero h1 span {
  background: linear-gradient(135deg, #a78bfa, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-btns { display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap; margin-top: 28px; }
.btn-primary { background: #7c3aed; color: #fff;
  padding: 14px 28px; border-radius: 10px; font-weight: 700; }
.btn-secondary { border: 1px solid rgba(255,255,255,.2);
  color: #fff; padding: 14px 28px; border-radius: 10px; }

Hero Section Types — When to Use Each

Centered Text Hero

Best for: SaaS, Products

Headline centered, subtitle, primary + secondary CTA, optional stat bar below. Focuses 100% on the value proposition. No image distraction.

Split Hero (Text + Image)

Best for: Apps, Services

Left: headline, subtitle, CTA. Right: product screenshot or illustration. Shows the product while delivering the message. 50/50 layout, stacks on mobile.

Full-Bleed Image Hero

Best for: Travel, Photography

Background image at 100vw × 100vh, text overlay with gradient. Emotionally impactful. Compress the hero image to under 200KB WebP to maintain PageSpeed.

Video Background Hero

Best for: Lifestyle, Premium

Muted autoplay video as background. High impact. Always provide a poster image fallback. Lazy-load the video to avoid PageSpeed penalties.

Hero Section Conversion Optimisation

H1 must pass the "blink test" — visitor understands what you do in 3 seconds
Primary CTA: action + benefit ("Start Free Trial" not just "Sign Up")
Secondary CTA: lower-commitment alternative ("See how it works" or "Watch demo")
Social proof immediately below hero — logo strip or customer count
Gradient text on key words — draws the eye to your differentiator
clamp() for responsive font-size — scales perfectly from 375px to 1920px screens
No more than 2 CTAs — three or more creates decision paralysis

Get All 180+ Templates — $35 One-Time

Commercial license · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

How do I create a hero section in HTML and CSS?

Minimal hero: `.hero { padding: 80px 20px; text-align: center; }`. Gradient headline text: `background: linear-gradient(135deg, #a78bfa, #38bdf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent`. Responsive font: `font-size: clamp(28px, 5vw, 56px)`. Dual CTA buttons in a flex row with gap. See the full code block above.

What makes a good HTML hero section?

A good hero section: passes the 3-second blink test (clear value proposition), has one primary CTA and one secondary CTA, shows social proof immediately below (logo strip or user count), uses responsive typography with clamp(), and loads in under 1 second. The headline does the job — avoid carousels, excessive animations, or multiple competing messages.

How do I make gradient text in HTML?

CSS gradient text: `background: linear-gradient(135deg, #a78bfa, #38bdf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;`. Apply this to a `span` within your h1, not the entire heading, so non-gradient text remains legible. Works in all modern browsers.

How do I make a full-screen hero section?

Full viewport hero: `.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; }`. For a background image: add `background: url('hero.jpg') center/cover no-repeat;` and a dark overlay with `::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.5); }`. Always compress the hero image to under 200KB WebP.

What is the best hero section for a SaaS website?

Best-converting SaaS hero: centered layout (not split), specific benefit headline ('Reduce support tickets by 40%' not 'The platform for support teams'), primary CTA ('Start free trial — no credit card') and secondary ('See a demo'), stat bar below ('Trusted by 5,000+ teams · 4.9/5 on G2 · 99.9% uptime'), and product screenshot below the fold. Avoid hero animations that delay time-to-first-interaction.