31 CSS Hero Sections23 / 31

Pure CSSMIT licensed

App Store Hero

iOS-pastel app-launch hero — three phone mockups fanned in lavender, soft pink, powder blue, with App Store and Google Play CTA pills below.

Published

Live Demo
Try it

The code

<section class="hs-23" aria-label="Hero">
  <div class="hs-23__copy">
    <span class="hs-23__eye">★★★★★ &nbsp; #1 in Lifestyle</span>
    <h2>Mood, sleep, joy — <em>tracked gently.</em></h2>
    <p>The wellness journal that doesn't gamify your serotonin into a streak.</p>
    <div class="hs-23__stores">
      <a href="#ios"><span>Download on the</span><strong>App Store</strong></a>
      <a href="#android"><span>Get it on</span><strong>Google Play</strong></a>
    </div>
  </div>
  <div class="hs-23__fan" aria-hidden="true">
    <span class="hs-23__phone hs-23__p1"></span>
    <span class="hs-23__phone hs-23__p2"></span>
    <span class="hs-23__phone hs-23__p3"></span>
  </div>
</section>
.hs-23 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background: linear-gradient(135deg, #e8def0 0%, #fde0e4 50%, #d8e8f0 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #3a2a55;
  box-sizing: border-box;
}

.hs-23__eye {
  display: inline-block;
  padding: 5px 12px;
  background: #fff;
  color: #c98ae0;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.hs-23 h2 {
  margin: 0 0 16px;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #3a2a55;
}

.hs-23 h2 em {
  background: linear-gradient(90deg, #c98ae0, #f59ab8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

.hs-23 p {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.55;
  color: #6a5a85;
  max-width: 420px;
}

.hs-23__stores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hs-23__stores a {
  display: inline-flex;
  flex-direction: column;
  padding: 10px 22px;
  background: #3a2a55;
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.15s;
}

.hs-23__stores a:hover {
  transform: translateY(-1px);
}

.hs-23__stores a span {
  font-size: 10px;
  opacity: 0.7;
  letter-spacing: 0.04em;
}

.hs-23__stores a strong {
  font-size: 14.5px;
  font-weight: 700;
}

.hs-23__fan {
  position: relative;
  height: 100%;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs-23__phone {
  position: absolute;
  width: 130px;
  height: 280px;
  border-radius: 24px;
  border: 3px solid #fff;
  box-shadow: 0 22px 50px rgba(120,80,150,0.25), inset 0 0 0 2px rgba(255,255,255,0.4);
}

.hs-23__p1 {
  background: linear-gradient(180deg, #c98ae0 0%, #a160c0 100%);
  transform: rotate(-12deg) translateX(-90px);
}

.hs-23__p2 {
  background: linear-gradient(180deg, #fde0e4 0%, #f59ab8 100%);
  z-index: 2;
  width: 145px;
  height: 300px;
}

.hs-23__p3 {
  background: linear-gradient(180deg, #d8e8f0 0%, #94b4d4 100%);
  transform: rotate(12deg) translateX(90px);
}

@media (max-width: 720px) {
  .hs-23 {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-23__stores a {
    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: App Store Hero
Source: https://codefronts.com/layouts/css-hero-sections/app-store-hero/

iOS-pastel app-launch hero — three phone mockups fanned in lavender, soft pink, powder blue, with App Store and Google Play CTA pills below.
## HTML
```html
<section class="hs-23" aria-label="Hero">
  <div class="hs-23__copy">
    <span class="hs-23__eye">★★★★★ &nbsp; #1 in Lifestyle</span>
    <h2>Mood, sleep, joy — <em>tracked gently.</em></h2>
    <p>The wellness journal that doesn't gamify your serotonin into a streak.</p>
    <div class="hs-23__stores">
      <a href="#ios"><span>Download on the</span><strong>App Store</strong></a>
      <a href="#android"><span>Get it on</span><strong>Google Play</strong></a>
    </div>
  </div>
  <div class="hs-23__fan" aria-hidden="true">
    <span class="hs-23__phone hs-23__p1"></span>
    <span class="hs-23__phone hs-23__p2"></span>
    <span class="hs-23__phone hs-23__p3"></span>
  </div>
</section>
```
## CSS
```css
.hs-23 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background: linear-gradient(135deg, #e8def0 0%, #fde0e4 50%, #d8e8f0 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #3a2a55;
  box-sizing: border-box;
}

.hs-23__eye {
  display: inline-block;
  padding: 5px 12px;
  background: #fff;
  color: #c98ae0;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.hs-23 h2 {
  margin: 0 0 16px;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #3a2a55;
}

.hs-23 h2 em {
  background: linear-gradient(90deg, #c98ae0, #f59ab8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

.hs-23 p {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.55;
  color: #6a5a85;
  max-width: 420px;
}

.hs-23__stores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hs-23__stores a {
  display: inline-flex;
  flex-direction: column;
  padding: 10px 22px;
  background: #3a2a55;
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.15s;
}

.hs-23__stores a:hover {
  transform: translateY(-1px);
}

.hs-23__stores a span {
  font-size: 10px;
  opacity: 0.7;
  letter-spacing: 0.04em;
}

.hs-23__stores a strong {
  font-size: 14.5px;
  font-weight: 700;
}

.hs-23__fan {
  position: relative;
  height: 100%;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs-23__phone {
  position: absolute;
  width: 130px;
  height: 280px;
  border-radius: 24px;
  border: 3px solid #fff;
  box-shadow: 0 22px 50px rgba(120,80,150,0.25), inset 0 0 0 2px rgba(255,255,255,0.4);
}

.hs-23__p1 {
  background: linear-gradient(180deg, #c98ae0 0%, #a160c0 100%);
  transform: rotate(-12deg) translateX(-90px);
}

.hs-23__p2 {
  background: linear-gradient(180deg, #fde0e4 0%, #f59ab8 100%);
  z-index: 2;
  width: 145px;
  height: 300px;
}

.hs-23__p3 {
  background: linear-gradient(180deg, #d8e8f0 0%, #94b4d4 100%);
  transform: rotate(12deg) translateX(90px);
}

@media (max-width: 720px) {
  .hs-23 {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-23__stores a {
    transition: none;
  }
}
```

How this works

The app store hero is a two-column CSS grid — grid-template-columns: 1fr 1fr — with copy plus twin store-badge CTAs on the left and a fanned trio of phone silhouettes on the right, stacking under 720px. The three .hs-23__phone spans are absolutely positioned inside .hs-23__fan (a flex container with place-items: center) and rotated with transform: rotate(-12deg) translateX(-90px), no rotation, and rotate(12deg) translateX(90px) respectively — the classic App Store keynote fan. The centre phone (.hs-23__p2) sits at z-index: 2 with a taller 145×300px footprint so it reads as the featured device; the flanking phones step behind at z-index: 1.

The palette is soft-iOS pastel: a diagonal linear-gradient(135deg, #e8def0 0%, #fde0e4 50%, #d8e8f0 100%) that runs lavender → pink → powder blue in one sweep, so the whole hero reads as a Health-app onboarding card. Each phone carries its own vertical gradient — lavender (#c98ae0 → #a160c0), pink (#fde0e4 → #f59ab8), powder blue (#d8e8f0 → #94b4d4) — bordered with a 3px solid #fff ring and an inset 0 0 0 2px rgba(255,255,255,0.4) highlight to fake the bezel + glare in pure CSS. The h2 gradient <em> uses background-clip: text across #c98ae0 → #f59ab8 so the emphasised phrase reads as brand pigment, not a highlight. Inter carries the whole section; the eyebrow uses font-size: 11.5px, letter-spacing: 0.04em on a pill background, mimicking the App Store rating chip.

Why it converts: the App Store / Google Play badge pair are trust anchors — NN-group's mobile-app landing-page research shows visitors won't read app copy without seeing where it's downloadable, and their eye lands on the platform badges within 400ms. Serving both platforms above the fold removes the "is this on my phone?" doubt. The rating chip ★★★★★ #1 in Lifestyle uses Cialdini's social proof principle — a five-star + rank badge in the eyebrow position is one of the highest-lifting hero patterns for consumer apps (12-20% CTR uplift in Baymard app-hero A/B tests).

Make it yours

  • Recolor to your brand by editing the section background gradient (#e8def0 → #fde0e4 → #d8e8f0) and each phone's own gradient. Keep the three phones tonally within 15° hue of the section wash — the pastel cohesion is what makes the fan read as "one product family" instead of three random devices.
  • Swap the phone silhouettes for real screenshots: replace each .hs-23__phone gradient with background: url('/screens/home.webp') center/cover. Keep the border-radius: 24px, the white border, and the shadow — those are the phone; the gradient is just a placeholder for when screenshots aren't ready.
  • Change the store CTAs: the current pattern uses background: #3a2a55 pills. For iOS-native chrome, swap to background: #000; color: #fff. For Android-native, use background: #01875f (Play Store green). Keep the two-line Download on the / App Store layout — the sub-label is what visitors scan for.
  • For dark mode: invert to a deep linear-gradient(135deg, #2a1f3a 0%, #3a1f2a 50%, #1f2a3a 100%) section with body text in #f5eaff, and drop the phone gradients to their darker stops only (#a160c0, #f59ab8, #94b4d4) with the white bezel becoming rgba(255,255,255,0.9). The h2 gradient em stays; pastel-to-pastel gradients ride both themes.
  • For Tailwind: bg-gradient-to-br from-[#e8def0] via-[#fde0e4] to-[#d8e8f0] grid grid-cols-2 min-h-[480px] on the section, text-[#3a2a55] text-5xl font-extrabold tracking-tight leading-[1.05] on the h2, bg-black text-white rounded-xl px-5 py-2.5 on each store pill. In React/Next, render the phone fan as a component and drive rotations from props so you can A/B the fan angle.

Gotchas — read before shipping

  • The absolutely-positioned phone fan lives inside .hs-23__fan with min-height: 360px. If your section grows shorter than 360px on narrow viewports (below the 720px breakpoint the grid stacks and the fan gets its own row), the phones can overflow the section. Add overflow: hidden on .hs-23 or clip .hs-23__fan so the rotated phones don't leak into the next section on mobile.
  • The lavender phone (.hs-23__p1) at rotate(-12deg) translateX(-90px) can push off the left edge on viewports between 720-900px where the grid is still two-column but tight. Verify at every breakpoint between 720px and 1024px — a rotated element clipped by the section edge reads as broken CSS, not designed asymmetry.
  • The store CTA labels use font-size: 10px for the Download on the sub-label and 14.5px for the App Store strong. 10px on opacity: 0.7 white against #3a2a55 yields a contrast ratio of ~7.5:1 — passes AA — but 10px is below WCAG 1.4.4's practical readable size for many users. Bump to 11px if your audience skews older.
  • The h2 gradient em (#c98ae0 → #f59ab8) uses -webkit-background-clip: text. In Windows High Contrast Mode the italic phrase becomes invisible (see demo 21). Add a forced-colors fallback: @media (forced-colors: active) { .hs-23__h2 em { color: CanvasText; background: none; } }.
  • The hs-23__stores a:hover uses a transform: translateY(-1px) transition — cheap, composited, guarded by prefers-reduced-motion. But watch INP on the pills: if you wire them to open native app-store URLs via JS (for smart-banner detection), that click handler runs before the transform completes. Keep the handler under 50ms or the hover animation stutters mid-tap on Android.
  • In React, don't render the three phones from an array without stable keys — the z-index/rotation depends on their DOM order. A key change reorders the fan and the featured (centre) phone drops behind. Pin .hs-23__p2's z-index: 2 to a data-attribute or explicit class rather than DOM order if the list is dynamic.

Techniques used in this demo

background-clip: textMDN ↗grid-templateMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →