31 CSS Hero Sections01 / 31

Pure CSSMIT licensed

Centered Classic

The artisanal SaaS hero — eyebrow, serif headline, prose subhead, a single deep-terracotta primary CTA flanked by a quiet ghost button. Sage on warm cream, the small-batch tools-for-makers aesthetic.

Published

Live Demo
Try it

The code

<section class="hs-01" aria-label="Hero">
  <div class="hs-01__inner">
    <span class="hs-01__eye">— A new kind of workspace</span>
    <h2>Make small things <em>that matter.</em></h2>
    <p>
      The toolkit for craftspeople who treat the work, the customer, and the calendar with the same
      care.
    </p>
    <div class="hs-01__cta">
      <a class="hs-01__btn hs-01__btn-pri" href="#start">Start free trial →</a>
      <a class="hs-01__btn" href="#tour">Watch the tour</a>
    </div>
    <p class="hs-01__foot">Free for 14 days · no card · cancel any time</p>
  </div>
</section>
.hs-01 {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 56px);
  background: radial-gradient(60% 80% at 50% 0%, rgba(200,160,120,0.18), transparent 70%), #f5f1e6;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  color: #2d3a2e;
  box-sizing: border-box;
}

.hs-01__inner {
  max-width: 640px;
  text-align: center;
}

.hs-01__eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #6b7d5a;
  margin-bottom: 18px;
}

.hs-01 h2 {
  margin: 0 0 18px;
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #1a2418;
}

.hs-01 h2 em {
  color: #c8553d;
  font-style: italic;
}

.hs-01 p {
  margin: 0 auto 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #4a5447;
  max-width: 460px;
}

.hs-01__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.hs-01__btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.18s, background 0.18s;
}

.hs-01__btn-pri {
  background: #c8553d;
  color: #fff8ed;
  box-shadow: 0 2px 0 #8d3a25;
}

.hs-01__btn-pri:hover {
  transform: translateY(-1px);
  background: #b94a32;
}

.hs-01__btn {
  background: transparent;
  color: #2d3a2e;
  border: 1px solid #2d3a2e;
}

.hs-01__btn:hover {
  background: #2d3a2e;
  color: #f5f1e6;
}

.hs-01__foot {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: #8a9080 !important;
  margin: 0 !important;
  max-width: none !important;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .hs-01__btn {
    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: Centered Classic
Source: https://codefronts.com/layouts/css-hero-sections/centered-classic/

The artisanal SaaS hero — eyebrow, serif headline, prose subhead, a single deep-terracotta primary CTA flanked by a quiet ghost button. Sage on warm cream, the small-batch tools-for-makers aesthetic.
## HTML
```html
<section class="hs-01" aria-label="Hero">
  <div class="hs-01__inner">
    <span class="hs-01__eye">— A new kind of workspace</span>
    <h2>Make small things <em>that matter.</em></h2>
    <p>
      The toolkit for craftspeople who treat the work, the customer, and the calendar with the same
      care.
    </p>
    <div class="hs-01__cta">
      <a class="hs-01__btn hs-01__btn-pri" href="#start">Start free trial →</a>
      <a class="hs-01__btn" href="#tour">Watch the tour</a>
    </div>
    <p class="hs-01__foot">Free for 14 days · no card · cancel any time</p>
  </div>
</section>
```
## CSS
```css
.hs-01 {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 56px);
  background: radial-gradient(60% 80% at 50% 0%, rgba(200,160,120,0.18), transparent 70%), #f5f1e6;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  color: #2d3a2e;
  box-sizing: border-box;
}

.hs-01__inner {
  max-width: 640px;
  text-align: center;
}

.hs-01__eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #6b7d5a;
  margin-bottom: 18px;
}

.hs-01 h2 {
  margin: 0 0 18px;
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #1a2418;
}

.hs-01 h2 em {
  color: #c8553d;
  font-style: italic;
}

.hs-01 p {
  margin: 0 auto 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #4a5447;
  max-width: 460px;
}

.hs-01__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.hs-01__btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.18s, background 0.18s;
}

.hs-01__btn-pri {
  background: #c8553d;
  color: #fff8ed;
  box-shadow: 0 2px 0 #8d3a25;
}

.hs-01__btn-pri:hover {
  transform: translateY(-1px);
  background: #b94a32;
}

.hs-01__btn {
  background: transparent;
  color: #2d3a2e;
  border: 1px solid #2d3a2e;
}

.hs-01__btn:hover {
  background: #2d3a2e;
  color: #f5f1e6;
}

.hs-01__foot {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: #8a9080 !important;
  margin: 0 !important;
  max-width: none !important;
  letter-spacing: 0.04em;
}

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

How this works

The whole hero is a single semantic <section> using display: grid; place-items: center — one line replaces the classic flex + justify-content + align-items triple. The min-height: 100vh gives the hero real presence without hard-coding 100vh, so this responsive hero section looks correct in an <iframe>, inside a card, or as a full-page landing-page hero. The content sits inside .hs-01__inner with max-width: 640px — the readable line length that keeps the subhead from stretching into unreadable 90-character lines on wide monitors.

The palette is the whole trick: a warm cream (#f5f1e6) base with a subtle terracotta radial-gradient wash pinned to the top center (radial-gradient(60% 80% at 50% 0%, rgba(200,160,120,0.18), transparent 70%)). That gradient reads as "morning light through a window," not as a design element — you feel it before you see it. Type-wise, Cormorant Garamond for the headline sets the artisanal register (small-batch, hand-made, tools-for-makers positioning); JetBrains Mono for the eyebrow and footer signals "maker software." Terracotta accent (#c8553d) lives only on the italic emphasis word and the primary CTA, so the eye finds the conversion path without effort.

Why it converts: single dominant CTA ("Start free trial") beats the double-primary trap where two equally-styled buttons split the click. The ghost button ("Watch the tour") absorbs cautious visitors without stealing weight from the trial CTA. The hs-01__foot risk-reversal line ("Free for 14 days · no card · cancel any time") sits directly under the CTAs where hesitant readers look for it — the exact placement that Baymard Institute checkout research validates. All motion is transform-only on 180ms ease so the interaction feel stays light without competing with the type.

Make it yours

  • Recolor to your brand by editing four values: the cream background (#f5f1e6), the deep-sage body text (#2d3a2e), the terracotta accent (#c8553d), and the deeper-terracotta button shadow (#8d3a25). Keep the shadow ~15% darker than the button fill so the flat-stamp effect holds.
  • Swap the serif: Cormorant Garamond is the small-batch/artisanal signal. For editorial → 'Playfair Display'. For tech/serious → 'Source Serif Pro'. For brutalist → 'IBM Plex Serif'. The eyebrow monospace font stays either way — the contrast is the effect.
  • Change the CTA shape: border-radius: 4px reads as "stamped card." Bump to border-radius: 999px for pill-style SaaS. Drop to border-radius: 0 for brutalist. Adjust the box-shadow depth to match — pills lose the flat-stamp effect and should use 0 1px 3px rgba(0,0,0,0.15) instead.
  • For dark mode: invert the palette to #1a2418 (deep sage) background, #f5f1e6 (cream) text, and keep #c8553d as accent — terracotta on deep sage is one of the strongest editorial pairings. The radial gradient becomes rgba(200,160,120,0.06).
  • For Tailwind: use bg-[#f5f1e6] font-serif on the section, text-[#1a2418] text-6xl font-semibold tracking-tight leading-[1.05] on the h2, bg-[#c8553d] shadow-[0_2px_0_#8d3a25] hover:-translate-y-px on the primary CTA. The clamp() sizes convert to text-4xl md:text-5xl lg:text-6xl ranges.

Gotchas — read before shipping

  • NEVER animate margin, padding, or width on the CTA hover — every frame triggers layout + paint + composite. The hover uses transform: translateY(-1px) which stays on the compositor thread with zero layout cost. INP scores stay under 200ms on mid-tier mobile.
  • The clamp(36px, 6vw, 60px) on the h2 font-size looks fine on desktop, but on very narrow phones (<340px) 36px can wrap the italic emphasis word to a lone second line. If your hero copy is longer than ~40 characters, drop the min to clamp(30px, 6vw, 60px) or force text-wrap: balance.
  • The primary CTA uses color: #fff8ed (warm cream) against background: #c8553d — contrast ratio ~4.7:1, passes WCAG AA for large text (14px+ bold) but not AAA. If your CTA text ever drops below 14px, either bump to a deeper terracotta (#a63f2b) or shift text to pure white.
  • The italic emphasis <em> inside the h2 works because Cormorant Garamond ships true italics. If you swap to a serif that only provides oblique (like Georgia's fallback), the italic looks synthetic and janky. Verify your font stack ships italics before shipping.
  • The .hs-01__foot uses !important on four properties because the parent .hs-01 p rule has higher specificity than .hs-01__foot on its own. This is a legit use of !important — resetting inherited paragraph styles on a semantic-child element. Don't remove the !importants unless you also increase .hs-01__foot's selector specificity.
  • The prefers-reduced-motion guard disables the 180ms transform transition on the CTAs — vestibular-disorder users find sudden translateY jumps disorienting even when subtle. Keep the guard even for micro-motion; the WCAG guidance is that ANY parallax or unexpected movement should respect the pref.

Techniques used in this demo

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

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →