Hero Section Design Patterns for Modern Websites

The hero section is the most important 600 pixels on your website. It determines whether visitors stay or leave. Here are the patterns that work in 2026 and how to choose between them.

Centered Hero

The most common pattern. Headline, subheadline, and CTA button stacked in the center. Works for almost any product.

<section class="relative py-24 px-6">
  <div class="max-w-3xl mx-auto text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
      Build faster with ready-made components
    </h1>
    <p class="mt-6 text-lg text-muted-foreground max-w-xl mx-auto leading-relaxed">
      Copy a prompt, paste it into your AI assistant, and get a production-ready component in seconds.
    </p>
    <div class="mt-10 flex flex-wrap gap-4 justify-center">
      <a class="rounded-xl bg-primary px-8 py-3.5 text-sm font-semibold text-primary-foreground shadow-md">
        Browse Components
      </a>
    </div>
  </div>
</section>

The centered layout feels open and focused. It works especially well when followed by a product screenshot or mockup below the CTA. See our minimal hero and SaaS hero for clean centered implementations.

Split Hero

Content on the left, visual on the right (or vice versa). This pattern works when you have a compelling product screenshot, illustration, or animation to show alongside the copy.

<section class="py-24 px-6">
  <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
    <div>
      <h1 class="text-4xl font-bold tracking-tight">Your headline here</h1>
      <p class="mt-4 text-muted-foreground">Supporting text.</p>
      <button class="mt-8 rounded-lg bg-primary px-6 py-3 text-sm font-medium text-primary-foreground">
        Get Started
      </button>
    </div>
    <div class="rounded-xl border border-border overflow-hidden shadow-2xl">
      <!-- Product screenshot or mockup -->
    </div>
  </div>
</section>

Split heroes feel more grounded and product-focused. They give you room to show the product without it competing with the headline for attention. Our enterprise hero and app download hero use this layout.

Background Treatments

The background sets the mood. Here are the most effective approaches:

Gradient Backgrounds

Subtle gradients add visual interest without distracting from content. Radial gradients from the center create a spotlight effect:

<section class="relative overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-b from-primary/5 via-background to-background" />
  <div class="relative z-10"><!-- content --></div>
</section>

Our gradient hero shows this pattern with animated color shifts.

Mesh and Noise

Mesh gradients (multiple gradient blobs blended together) create a modern, organic feel. Add a noise texture overlay for depth. This is the approach many design-forward companies use.

Video Backgrounds

Video backgrounds grab attention but must be handled carefully. Mute them, loop them, and keep them subtle. A slow-moving abstract background works better than a busy product demo. Check out the video background hero for a working implementation.

Floating Elements

Adding floating badges, stats, or mini-cards around the hero creates a sense of activity and social proof. Common patterns:

• Floating user count badge ("1,200+ active users")
• Star rating badge
• Animated notification cards
• Technology logos

Keep them subtle — they should enhance, not distract. Our launch hero and card hero show effective floating element patterns.

Dashboard Mockups

For B2B and SaaS products, showing a dashboard screenshot below the hero headline is one of the strongest patterns. It immediately answers "what does this product look like?"

The mockup should be slightly elevated with a border and shadow, often angled with CSS perspective for a 3D effect:

<div class="mt-16 mx-auto max-w-5xl perspective-1000">
  <div class="rounded-xl border border-border shadow-2xl overflow-hidden transform rotate-x-2">
    <!-- Dashboard screenshot -->
  </div>
</div>

Our dashboard hero and perspective hero implement this pattern with smooth scroll-triggered animations.

Picking the Right Pattern

Centered when your product is abstract or you want maximum headline impact.

Split when you have a strong visual (screenshot, illustration, 3D render).

Video background when your product is visual or experiential.

Dashboard mockup when you are selling a B2B tool and want to show the product immediately.

Browse all 17 of our hero components to find the right pattern for your next project. Every one comes with a prompt you can copy and customize.