Hero Section Designs — Copy HTML/CSS Hero Components

Ad Slot — Below Header (728×90 Leaderboard)

6 components. Pick one, check it in Preview, open Code to read it, then Copy code — you get the complete HTML and its CSS in one self-contained snippet, so it pastes in looking exactly like the preview.

Centered

HTML + CSS · self-contained21 lines

<section class="nxh1">
  <p class="nxh1-eyebrow">Welcome</p>
  <h1 class="nxh1-title">Build something<br>beautiful today</h1>
  <p class="nxh1-text">Start creating modern web experiences with a collection of ready-made components.</p>
  <div class="nxh1-actions">
    <a href="#" class="nxh1-btn">Get started <span aria-hidden="true">→</span></a>
    <a href="#" class="nxh1-btn nxh1-ghost">See examples</a>
  </div>
</section>
<style>
.nxh1, .nxh1 * { box-sizing: border-box; }
.nxh1 { width: 100%; padding: clamp(40px, 8vw, 72px) 20px; background: #fff; border: 1px solid #ece4d8; border-radius: 18px; text-align: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxh1-eyebrow { margin: 0 0 12px; color: #a24832; font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.nxh1-title { margin: 0 0 14px; font: 900 clamp(30px, 6vw, 50px)/1.1 Georgia,"Times New Roman",serif; }
.nxh1-text { max-width: 440px; margin: 0 auto 26px; color: #6d645a; font-size: 16px; line-height: 1.6; }
.nxh1-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.nxh1-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 26px; border: 2px solid #2a1f1a; border-radius: 999px; background: #2a1f1a; color: #faf6f0; font-weight: 600; font-size: 15px; text-decoration: none; }
.nxh1-btn:hover { background: #a24832; border-color: #a24832; }
.nxh1-ghost { background: transparent; color: #2a1f1a; }
.nxh1-ghost:hover { background: #2a1f1a; color: #faf6f0; border-color: #2a1f1a; }
</style>

Split

HTML + CSS · self-contained32 lines

<section class="nxh2">
  <div class="nxh2-copy">
    <span class="nxh2-badge">● New release 2.0</span>
    <h1>Ship your next idea in a weekend</h1>
    <p>Everything you need to launch: auth, payments and a beautiful dashboard. No setup.</p>
    <div class="nxh2-actions">
      <a href="#" class="nxh2-btn">Start free trial</a>
      <a href="#" class="nxh2-link">Watch demo <span aria-hidden="true">▶</span></a>
    </div>
  </div>
  <div class="nxh2-art" aria-hidden="true">
    <div class="nxh2-win"><i></i><i></i><i></i></div>
    <div class="nxh2-bars"><b style="height:40%"></b><b style="height:65%"></b><b style="height:50%"></b><b style="height:85%"></b><b style="height:70%"></b></div>
  </div>
</section>
<style>
.nxh2, .nxh2 * { box-sizing: border-box; }
.nxh2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; width: 100%; padding: clamp(28px, 5vw, 56px); background: #faf6f0; border-radius: 20px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxh2-badge { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: #f3e2d9; color: #8a3a27; font-size: 13px; font-weight: 600; }
.nxh2 h1 { margin: 0 0 14px; font: 800 clamp(28px, 4.6vw, 44px)/1.12 Georgia,"Times New Roman",serif; }
.nxh2 p { margin: 0 0 24px; color: #6d645a; font-size: 16px; line-height: 1.6; }
.nxh2-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.nxh2-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 12px; background: #a24832; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.nxh2-btn:hover { background: #8a3a27; }
.nxh2-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: #2a1f1a; font-weight: 600; font-size: 15px; text-decoration: none; }
.nxh2-art { padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 20px 50px rgba(42,31,26,.12); }
.nxh2-win { display: flex; gap: 6px; margin-bottom: 16px; }
.nxh2-win i { width: 10px; height: 10px; border-radius: 50%; background: #e2d8ca; }
.nxh2-bars { display: flex; align-items: flex-end; gap: 10px; height: 160px; }
.nxh2-bars b { flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(#e0603a, #a24832); }
@media (max-width: 680px) { .nxh2 { grid-template-columns: 1fr; } .nxh2-bars { height: 110px; } }
</style>

Dark Gradient

HTML + CSS · self-contained23 lines

<section class="nxh3">
  <h1>The fastest way to<br><span>build and deploy</span></h1>
  <p>Push your code. We handle builds, previews and global hosting.</p>
  <a href="#" class="nxh3-btn">Deploy now</a>
  <dl class="nxh3-stats">
    <div><dt>Uptime</dt><dd>99.99%</dd></div>
    <div><dt>Edge regions</dt><dd>40+</dd></div>
    <div><dt>Teams</dt><dd>12k</dd></div>
  </dl>
</section>
<style>
.nxh3, .nxh3 * { box-sizing: border-box; }
.nxh3 { width: 100%; padding: clamp(40px, 7vw, 72px) 20px; border-radius: 20px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(224,96,58,.45), transparent 60%), #15110d; color: #faf6f0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxh3 h1 { margin: 0 0 14px; font: 800 clamp(28px, 5.5vw, 48px)/1.12 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: -.02em; }
.nxh3 h1 span { background: linear-gradient(90deg, #f2a65a, #e0603a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nxh3 p { max-width: 420px; margin: 0 auto 26px; color: #bdb3a6; font-size: 16px; line-height: 1.6; }
.nxh3-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border-radius: 999px; background: #faf6f0; color: #15110d; font-weight: 700; font-size: 15px; text-decoration: none; }
.nxh3-btn:hover { background: #f2a65a; }
.nxh3-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin: 36px 0 0; }
.nxh3-stats div { min-width: 90px; }
.nxh3-stats dt { color: #9c9285; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.nxh3-stats dd { margin: 4px 0 0; font-size: 24px; font-weight: 800; }
</style>

Email Capture

HTML + CSS · self-contained27 lines

<section class="nxh4">
  <h1>Get the weekly design digest</h1>
  <p>Five links, one idea, zero spam. Join 18,000 designers.</p>
  <form class="nxh4-form" action="#" method="post">
    <label class="nxh4-sr" for="nxh4-email">Email address</label>
    <input id="nxh4-email" type="email" name="email" placeholder="[email protected]" autocomplete="email" required>
    <button type="submit">Subscribe</button>
  </form>
  <small>Unsubscribe any time.</small>
</section>
<style>
.nxh4, .nxh4 * { box-sizing: border-box; }
.nxh4 { width: 100%; padding: clamp(36px, 6vw, 64px) 20px; border-radius: 20px; text-align: center; background: linear-gradient(160deg, #fdf3ea, #f3e2d9); font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxh4 h1 { margin: 0 0 10px; font: 800 clamp(26px, 5vw, 40px)/1.15 Georgia,"Times New Roman",serif; }
.nxh4 p { margin: 0 0 24px; color: #6d645a; font-size: 16px; line-height: 1.55; }
.nxh4-form { display: flex; gap: 8px; max-width: 440px; margin: 0 auto 10px; padding: 6px; border: 1px solid #e6d5c6; border-radius: 999px; background: #fff; }
.nxh4-form input { flex: 1; min-width: 0; min-height: 46px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #2a1f1a; font: 16px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; outline: none; }
.nxh4-form button { min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: #2a1f1a; color: #faf6f0; font: 600 15px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxh4-form button:hover { background: #a24832; }
.nxh4-form:focus-within { border-color: #a24832; }
.nxh4 small { color: #8a7f73; font-size: 13px; }
.nxh4-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 460px) {
  .nxh4-form { flex-direction: column; border-radius: 18px; }
  .nxh4-form button { width: 100%; }
}
</style>

Gradient Blobs

HTML + CSS · self-contained23 lines

<section class="nxh5">
  <div class="nxh5-inner">
    <span class="nxh5-pill">✦ Trusted by 2,000+ teams</span>
    <h1>Make work feel like play</h1>
    <p>Plan, track and celebrate together — in one calm, colourful space.</p>
    <div class="nxh5-actions">
      <a href="#" class="nxh5-btn">Try it free</a>
      <a href="#" class="nxh5-btn nxh5-alt">Book a demo</a>
    </div>
  </div>
</section>
<style>
.nxh5, .nxh5 * { box-sizing: border-box; }
.nxh5 { position: relative; width: 100%; overflow: hidden; border-radius: 22px; background: radial-gradient(circle at 15% 20%, #ffd3a8 0, transparent 40%), radial-gradient(circle at 85% 30%, #f7a8c4 0, transparent 42%), radial-gradient(circle at 50% 100%, #b6c8ff 0, transparent 50%), #fff7f0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxh5-inner { padding: clamp(40px, 7vw, 76px) 20px; text-align: center; }
.nxh5-pill { display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; }
.nxh5 h1 { margin: 0 0 12px; font: 900 clamp(30px, 6vw, 52px)/1.08 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: -.03em; }
.nxh5 p { max-width: 430px; margin: 0 auto 26px; color: #5e503f; font-size: 16px; line-height: 1.6; }
.nxh5-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.nxh5-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 14px; background: #2a1f1a; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 8px 20px rgba(42,31,26,.2); }
.nxh5-alt { background: #fff; color: #2a1f1a; box-shadow: none; }
.nxh5-btn:hover { transform: translateY(-1px); }
</style>

Editorial

HTML + CSS · self-contained19 lines

<section class="nxh6">
  <p class="nxh6-kicker">Issue Nº 14 — Autumn</p>
  <h1 class="nxh6-title">Slow design<br><em>for a fast world</em></h1>
  <div class="nxh6-foot">
    <p>Essays and interviews on craft, patience and the things worth making well.</p>
    <a href="#" class="nxh6-link">Read the issue <span aria-hidden="true">→</span></a>
  </div>
</section>
<style>
.nxh6, .nxh6 * { box-sizing: border-box; }
.nxh6 { width: 100%; padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 56px); border-top: 6px solid #2a1f1a; background: #faf6f0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxh6-kicker { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #a24832; }
.nxh6-title { margin: 0 0 28px; font: 400 clamp(36px, 8vw, 72px)/1 Georgia,"Times New Roman",serif; letter-spacing: -.02em; }
.nxh6-title em { color: #a24832; }
.nxh6-foot { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #d4c5a9; }
.nxh6-foot p { flex: 1 1 260px; margin: 0; max-width: 460px; color: #5e503f; font-size: 16px; line-height: 1.6; }
.nxh6-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1.5px solid #2a1f1a; border-radius: 999px; color: #2a1f1a; font-weight: 600; font-size: 15px; text-decoration: none; }
.nxh6-link:hover { background: #2a1f1a; color: #faf6f0; }
</style>

Class names carry a unique prefix, so several snippets can sit on one page without clashing. Colours and fonts are plain CSS values — change them to match your brand.

Ad Slot — Mid Content (Responsive In-Article)

💡

What Is This?

Gallery of hero section designs for web pages
Includes full-screen, split layout, and gradient overlays
Copy HTML and CSS with one click
Customizable text, images, and CTA buttons
Responsive designs for all screen sizes

🛠️

How to Use

Browse hero section designs in the gallery
Preview each hero at full width with realistic content
Copy the HTML and CSS code with one click
Replace placeholder content with your own text and images
Customize colors, gradients, and layout to match your brand

🎯

Use Cases

Creating impactful landing page hero sections
Finding design inspiration for above-the-fold content
Building SaaS and product hero sections with CTAs
Prototyping website headers and first impressions
Learning CSS techniques for full-screen hero layouts

Ad Slot — Bottom (300×250 Rectangle)

🦸 Hero Sections