CSS Banners & Alerts 11 / 14

Responsive Full Width Hero Banner CSS

Three responsive full-width CSS hero banners stacked in completely different colour worlds — a dark cinematic mesh-gradient hero (Build faster / Ship bold) with grain texture overlay + glow eyebrow dot, a warm amber summer-collection hero, and a monochrome paper-grid hero for an open-source utility — all using <code>clamp()</code> for fluid typography throughout so no media queries are needed for type scaling.

Best formarketing landing pages, product launches, agency homepages, brand hero sections.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="ba-hro" aria-label="Responsive full-width hero banner demo">
  <div class="hero hero--dark">
    <div class="hero-bg" aria-hidden="true"></div>
    <div class="hero-content">
      <div class="hero-eyebrow"><span class="hero-eyebrow-dot" aria-hidden="true"></span>New — Launching today</div>
      <h1 class="hero-title">Build<br><span class="thin">faster.</span><br>Ship <span class="accent">bold.</span></h1>
      <p class="hero-desc">The platform that scales from prototype to production without the complexity. One workflow, infinite possibilities.</p>
      <div class="hero-actions">
        <a href="#" class="btn-hero-primary">Get started free</a>
        <a href="#" class="btn-hero-ghost"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg> Watch demo</a>
      </div>
    </div>
  </div>

  <div class="hero hero--warm">
    <div class="hero-bg" aria-hidden="true"></div>
    <div class="hero-content">
      <div class="hero-eyebrow"><span class="hero-eyebrow-dot" aria-hidden="true"></span>Summer collection</div>
      <h1 class="hero-title">Made<br>for the<br><span class="accent">season.</span></h1>
      <p class="hero-desc">Thoughtfully designed pieces crafted from sustainable materials. Limited run — once they're gone, they're gone.</p>
      <div class="hero-actions">
        <a href="#" class="btn-hero-primary">Shop collection</a>
        <a href="#" class="btn-hero-ghost">Explore lookbook <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a>
      </div>
    </div>
  </div>

  <div class="hero hero--mono">
    <div class="hero-bg" aria-hidden="true"></div>
    <div class="hero-content">
      <div class="hero-eyebrow"><span class="hero-eyebrow-dot" aria-hidden="true"></span>Open source</div>
      <h1 class="hero-title">Simple.<br><span class="accent">Precise.</span><br>Fast.</h1>
      <p class="hero-desc">A zero-dependency CSS utility library with a 4 KB footprint. No build step. No configuration. Just drop it in and go.</p>
      <div class="hero-actions">
        <a href="#" class="btn-hero-primary">View on GitHub</a>
        <a href="#" class="btn-hero-ghost">Read the docs →</a>
      </div>
    </div>
  </div>
</section>
/* ─── 11 Responsive Full Width Hero Banner — cinematic ────────── */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;700;900&family=Outfit:wght@300;400;500&display=swap');

.ba-hro {
  position: relative;
  width: 100%;
  min-height: 1200px;
  font-family: 'Outfit', sans-serif;
  background: #050505;
  color: #fff;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.ba-hro *, .ba-hro *::before, .ba-hro *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ba-hro .hero { position: relative; width: 100%; min-height: 540px; display: flex; align-items: center; overflow: hidden; animation: ba-hro-fade 0.8s ease both; }
.ba-hro .hero--warm { animation-delay: 0.15s; } .ba-hro .hero--mono { animation-delay: 0.3s; }
@keyframes ba-hro-fade { from { opacity: 0; } to { opacity: 1; } }

.ba-hro .hero-bg { position: absolute; inset: 0; z-index: 0; }
.ba-hro .hero--dark .hero-bg { background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(99,102,241,0.35) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 20% 70%, rgba(236,72,153,0.2) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(6,182,212,0.15) 0%, transparent 50%), linear-gradient(160deg, #050510 0%, #0a0a1a 50%, #050505 100%); }
.ba-hro .hero--dark .hero-bg::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); pointer-events: none; mix-blend-mode: screen; }
.ba-hro .hero--dark .hero-bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent); }

.ba-hro .hero-content { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(60px, 10vw, 120px) clamp(24px, 6vw, 80px); }
.ba-hro .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(10px, 1.2vw, 12px); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: clamp(20px, 3vw, 32px); }
.ba-hro .hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #6366f1; animation: ba-hro-glow 2s ease-in-out infinite; }
@keyframes ba-hro-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.5); } 50% { box-shadow: 0 0 0 6px rgba(99,102,241,0); } }
.ba-hro .hero-title { font-family: 'Unbounded', sans-serif; font-size: clamp(36px, 7vw, 96px); font-weight: 900; line-height: 1.0; letter-spacing: -0.02em; margin-bottom: clamp(20px, 3vw, 28px); max-width: 11ch; }
.ba-hro .hero-title .accent { color: #6366f1; }
.ba-hro .hero-title .thin { font-weight: 300; }
.ba-hro .hero-desc { font-size: clamp(14px, 1.8vw, 18px); font-weight: 300; color: rgba(255,255,255,0.55); line-height: 1.75; max-width: 480px; margin-bottom: clamp(32px, 5vw, 48px); }
.ba-hro .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ba-hro .btn-hero-primary { font-size: clamp(12px, 1.3vw, 14px); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: clamp(12px, 1.8vw, 16px) clamp(24px, 3.5vw, 36px); background: white; color: #050510; border: none; border-radius: 4px; cursor: pointer; transition: all 0.22s ease; text-decoration: none; display: inline-block; }
.ba-hro .btn-hero-primary:hover { background: #6366f1; color: white; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(99,102,241,0.4); }
.ba-hro .btn-hero-ghost { font-size: clamp(12px, 1.3vw, 14px); font-weight: 400; letter-spacing: 0.06em; color: rgba(255,255,255,0.6); background: transparent; text-decoration: none; transition: color 0.2s; display: flex; align-items: center; gap: 6px; }
.ba-hro .btn-hero-ghost svg { width: 16px; height: 16px; }
.ba-hro .btn-hero-ghost:hover { color: white; }

.ba-hro .hero--warm { color: #111; }
.ba-hro .hero--warm .hero-bg { background: radial-gradient(ellipse 60% 50% at 90% 20%, rgba(251,191,36,0.4) 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 10% 90%, rgba(249,115,22,0.25) 0%, transparent 50%), linear-gradient(160deg, #fffbf0 0%, #fef3c7 50%, #fff8ed 100%); }
.ba-hro .hero--warm .hero-eyebrow { color: rgba(17,17,17,0.4); }
.ba-hro .hero--warm .hero-eyebrow-dot { background: #f59e0b; animation: none; box-shadow: none; }
.ba-hro .hero--warm .hero-title { color: #111; }
.ba-hro .hero--warm .hero-title .accent { color: #ea580c; }
.ba-hro .hero--warm .hero-desc { color: rgba(17,17,17,0.5); }
.ba-hro .hero--warm .btn-hero-primary { background: #111; color: white; }
.ba-hro .hero--warm .btn-hero-primary:hover { background: #ea580c; box-shadow: 0 8px 32px rgba(234,88,12,0.3); }
.ba-hro .hero--warm .btn-hero-ghost { color: rgba(17,17,17,0.5); }
.ba-hro .hero--warm .btn-hero-ghost:hover { color: #111; }

.ba-hro .hero--mono { background: #fff; color: #111; }
.ba-hro .hero--mono .hero-bg { background: #fff; background-image: repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(0,0,0,0.04) 47px, rgba(0,0,0,0.04) 48px); }
.ba-hro .hero--mono .hero-eyebrow { color: rgba(17,17,17,0.35); }
.ba-hro .hero--mono .hero-eyebrow-dot { background: #111; animation: none; box-shadow: none; }
.ba-hro .hero--mono .hero-title { color: #111; }
.ba-hro .hero--mono .hero-title .accent { -webkit-text-stroke: 1px #111; color: transparent; }
.ba-hro .hero--mono .hero-desc { color: rgba(17,17,17,0.45); }
.ba-hro .hero--mono .btn-hero-primary { background: #111; color: white; border-radius: 2px; }
.ba-hro .hero--mono .btn-hero-primary:hover { background: #333; box-shadow: none; }
.ba-hro .hero--mono .btn-hero-ghost { color: rgba(17,17,17,0.45); }

@media (prefers-reduced-motion: reduce) { .ba-hro .hero, .ba-hro .hero-eyebrow-dot { animation: none !important; } }

More from CSS Banners & Alerts

CSS Text Wrap Banner with Long StringsDismissible CSS Alert with Close ButtonSticky Top Announcement Banner CSSCSS Cookie Consent Banner BottomCSS Alert Banner with Icon AlignmentCSS Toast Notification Alert Top RightCSS Banner with Diagonal Slash BackgroundCSS Gradient Animated Border AlertSemantic Bootstrap-style Alerts CSSInline Form Validation Alert CSSCSS Pulsing Banner for Live UpdatesMinimalist Border Left CSS Alert
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →