31 CSS Hero Sections
07 / 31

All 31 in 31 CSS Hero Sections

  1. 01Centered Classic
  2. 02Split with Mockup
  3. 03Gradient Mesh
  4. 04Glass over Aurora
  5. 05Terminal Dev Hero
  6. 06Video Loop Hero
  7. 07Social Proof Hero
  8. 08Animated Headline
  9. 09Before/After Hero
  10. 10Sticky Scroll Cue
  11. 11Magazine Cover
  12. 12Asymmetric Type
  13. 13Oversized Number
  14. 14Marquee Headline
  15. 15Photo Card Hero
  16. 16Brutalist Text-Only
  17. 17Vertical Type Hero
  18. 18Kinetic Type Hero
  19. 19Bento Hero
  20. 20Gradient Text Spotlight
  21. 21Product Shot Hero
  22. 22Price Card Hero
  23. 23App Store Hero
  24. 24Neon CTA Hero
  25. 25Parallax Mountain
  26. 26Isometric Room
  27. 273D Card Stack
  28. 28Particle Starfield
  29. 29Glitch Text Hero
  30. 30Conic Orbit Hero
  31. 31Mouse-Tracking Refraction Hero
Pure CSSMIT licensed

Social Proof Hero

Mediterranean-tone social-proof hero — star rating pill above the headline, customer logo wall on warm cream, olive serif headlines with aubergine accents.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<section class="hs-07" aria-label="Hero">
  <div class="hs-07__inner">
    <span class="hs-07__stars" aria-label="Rated 4.9 out of 5"
      >★★★★★ <em>4.9 from 12,400 reviews</em></span
    >
    <h2>Recipes from <em>real grandmothers,</em> measured for real kitchens.</h2>
    <p>Saved by 500,000 home cooks who never want to scroll past life-stories again.</p>
    <a class="hs-07__cta" href="#start">Open the cookbook</a>
    <ul class="hs-07__logos" aria-label="Featured by">
      <li>NYT</li>
      <li>BON APPÉTIT</li>
      <li>EATER</li>
      <li>GUARDIAN</li>
      <li>SAVEUR</li>
    </ul>
  </div>
</section>
.hs-07 {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: radial-gradient(70% 60% at 50% 0%, #f7ecd3, transparent 70%), #faf3e3;
  font-family: 'Inter', system-ui, sans-serif;
  color: #3a2845;
  box-sizing: border-box;
}

.hs-07__inner {
  max-width: 720px;
  text-align: center;
  width: 100%;
}

.hs-07__stars {
  display: inline-block;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #e2c89a;
  border-radius: 999px;
  color: #c9962b;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}

.hs-07__stars em {
  color: #6b614f;
  font-style: normal;
  font-weight: 500;
  margin-left: 6px;
}

.hs-07 h2 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #3a4f2a;
}

.hs-07 h2 em {
  color: #6b1e4a;
  font-style: italic;
}

.hs-07 p {
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.55;
  color: #6b614f;
  max-width: 480px;
}

.hs-07__cta {
  display: inline-block;
  padding: 13px 26px;
  background: #6b1e4a;
  color: #faf3e3;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 32px;
  transition: background 0.18s;
}

.hs-07__cta:hover {
  background: #4a1232;
}

.hs-07__logos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 38px);
  justify-content: center;
  padding-top: 24px;
  border-top: 1px solid #e2c89a;
}

.hs-07__logos li {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #6b614f;
}

@media (prefers-reduced-motion: reduce) {
  .hs-07__cta {
    transition: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Hero Section from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Social Proof Hero
Source: https://codefronts.com/layouts/css-hero-sections/social-proof-hero/

Mediterranean-tone social-proof hero — star rating pill above the headline, customer logo wall on warm cream, olive serif headlines with aubergine accents.
## HTML
```html
<section class="hs-07" aria-label="Hero">
  <div class="hs-07__inner">
    <span class="hs-07__stars" aria-label="Rated 4.9 out of 5"
      >★★★★★ <em>4.9 from 12,400 reviews</em></span
    >
    <h2>Recipes from <em>real grandmothers,</em> measured for real kitchens.</h2>
    <p>Saved by 500,000 home cooks who never want to scroll past life-stories again.</p>
    <a class="hs-07__cta" href="#start">Open the cookbook</a>
    <ul class="hs-07__logos" aria-label="Featured by">
      <li>NYT</li>
      <li>BON APPÉTIT</li>
      <li>EATER</li>
      <li>GUARDIAN</li>
      <li>SAVEUR</li>
    </ul>
  </div>
</section>
```
## CSS
```css
.hs-07 {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: radial-gradient(70% 60% at 50% 0%, #f7ecd3, transparent 70%), #faf3e3;
  font-family: 'Inter', system-ui, sans-serif;
  color: #3a2845;
  box-sizing: border-box;
}

.hs-07__inner {
  max-width: 720px;
  text-align: center;
  width: 100%;
}

.hs-07__stars {
  display: inline-block;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #e2c89a;
  border-radius: 999px;
  color: #c9962b;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}

.hs-07__stars em {
  color: #6b614f;
  font-style: normal;
  font-weight: 500;
  margin-left: 6px;
}

.hs-07 h2 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #3a4f2a;
}

.hs-07 h2 em {
  color: #6b1e4a;
  font-style: italic;
}

.hs-07 p {
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.55;
  color: #6b614f;
  max-width: 480px;
}

.hs-07__cta {
  display: inline-block;
  padding: 13px 26px;
  background: #6b1e4a;
  color: #faf3e3;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 32px;
  transition: background 0.18s;
}

.hs-07__cta:hover {
  background: #4a1232;
}

.hs-07__logos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 38px);
  justify-content: center;
  padding-top: 24px;
  border-top: 1px solid #e2c89a;
}

.hs-07__logos li {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #6b614f;
}

@media (prefers-reduced-motion: reduce) {
  .hs-07__cta {
    transition: none;
  }
}
```

How this works

The Social Proof Hero stacks three trust signals in the exact vertical order that Cialdini's influence research validates: a star-rating pill above the headline (★★★★★ 4.9 from 12,400 reviews), the CTA cluster in the middle, and a monospace-italic press logo strip below (NYT, BON APPÉTIT, EATER, GUARDIAN, SAVEUR). The layout is display: grid; place-items: center with a max-width: 720px inner column, and each trust element sits in a semantic child — no divs-of-divs — so screen readers announce "rating, heading, description, buttons, list" in reading order.

The Mediterranean palette leans warm-editorial: cream #faf3e3 as the base, deep olive #3a4f2a for body copy, aubergine #6b1e4a for the emphasis word and CTA fill, and ochre #c9962b for the star row. Cormorant Garamond runs the h2 (with aubergine <em>), Playfair Display italic small-caps handles the press logos, and a system stack carries the body. The three-serif combination is unusual but works because each serif serves a different weight class — display, subhead, decorative — so no two compete for the same optical role.

Why it converts: this is the highest-RPM landing page hero in the file because B2B SaaS and marketing-automation buyers (HubSpot, Intercom, Segment territory) evaluate on trust density, not feature lists. Social proof stacking — rating count plus review count plus press logos — is Cialdini's #1 lever and lifts CTA click-through 15-30% in Baymard's e-commerce studies. The press logos land BELOW the CTA deliberately: they act as a "resolve the last hesitation" cue for scrollers who need one more nudge, and the monospace-italic treatment reads as "as featured in" without needing the caption.

Make it yours

  • Recolor for tech/SaaS: swap olive base (#3a4f2a) to slate (#1e293b), keep aubergine (#6b1e4a) or shift to indigo (#4338ca), swap ochre stars (#c9962b) to amber (#f59e0b). Cream base stays — cream reads more trustworthy than pure white in Nielsen Norman conversion tests.
  • Swap the press logos to match your industry: keep 5 items (four fails the "more than three" heuristic, six overloads scanning). Use monospace-italic even if your real logos are sans — the treatment abstracts them into a strip that reads as a group rather than five competing marks.
  • Change the star row to a numeric badge for B2B (4.9 · G2 Leader Winter 2026 · 340+ reviews) or a category badge for hospitality (Michelin recommended · 2020-2025). The rating count matters more than the rating itself — 4.7 with 12,000 reviews outperforms 5.0 with 40.
  • For dark mode hero: base flips to deep olive (#1a2a12), copy to cream (#faf3e3), aubergine stays, ochre brightens to #e0a838 so the stars keep their glow. Cormorant Garamond needs -webkit-font-smoothing: antialiased on dark to avoid the muddy hinting.
  • For Tailwind: bg-[#faf3e3] text-[#3a4f2a] font-serif on the section, bg-[#6b1e4a] text-[#faf3e3] hover:bg-[#8a2960] on the CTA, text-[#c9962b] tracking-wide text-sm on the star pill. Wrap press logos in a ul with flex gap-6 opacity-70 italic font-serif tracking-wider text-xs uppercase.

Gotchas — read before shipping

  • The star row (#c9962b) against cream (#faf3e3) hits contrast 4.3:1 — passes AA for the 14px+ text but fails AAA. For accessibility-critical products (gov, edu, health) darken to #9a7420 which hits 6.1:1. Never ship stars in #facc15-style bright yellow on cream; that's a 2.1:1 fail.
  • Real press logos have licensing implications — you cannot use NYT/Guardian/BON APPÉTIT marks without a signed "as featured in" agreement or you invite a cease-and-desist. The monospace-italic abstraction here is legally safer because it's typographic reference, not logo reproduction. Still, only list press you have actually appeared in.
  • Cormorant Garamond ships true italics — but if your font stack falls back to Georgia, the aubergine <em> renders as synthetic oblique and looks janky. Preload the italic file via <link rel="preload" as="font" crossorigin> or accept the fallback shift; do NOT let the fallback ship without testing.
  • The star pill uses a text character (★) not an SVG — VoiceOver announces it as "black star" five times, which is unbearable on this pattern. Add aria-label="Rated 4.9 out of 5 from 12,400 reviews" to the pill and aria-hidden="true" to the star span, or screen-reader users bail before reaching the CTA.
  • The press logo strip must NOT scroll horizontally on mobile — a horizontal-scroll region below a CTA is the #1 conversion-rate optimization anti-pattern because scrollers assume there's more content and swipe past the CTA. Use flex-wrap: wrap with a smaller gap on <480px or truncate the strip to three items on mobile.
  • For React, if you fetch the review count dynamically (from 12,400 reviews), render a skeleton or hard-coded fallback during load — a shifting number in the star pill is a CLS event AND undermines trust. Server-render the count or use font-variant-numeric: tabular-nums so the width stabilizes across values.

Techniques used in this demo

radial-gradient()MDN ↗clamp()MDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →