31 CSS Hero Sections

A hero section is the first full-bleed band of a landing page — typically containing an eyebrow tag, headline, subheadline, primary call-to-action, and a supporting visual. It's the most important block on the page because it carries the value proposition above the fold.

The pattern is: match the hero's visual register to your buyer's evaluation lens. B2B SaaS buyers (CRM, PM, dev tools) evaluate on proof and specs, so use Demo 02 Split with Mockup (SVG dashboard mockup on the right), Demo 21 Product Shot (floating device with spec badges), or Demo 19 Bento Grid (5 tiles compressing features into visual hierarchy — the Apple/Notion/Linear pattern). Fintech, AI, and analytics buyers respond to gradient-mesh visual language (Stripe/Linear/Vercel), so Demo 03 Gradient Mesh and Demo 20 Gradient Text Spotlight are the right pattern — the mesh signals 'well-funded, modern, AI-adjacent' before a word is read. Developer-tool buyers (DevOps, observability, edge platforms) trust terminal aesthetics because it says 'we built this for you, not for your VP' — Demo 05 Terminal Dev is exactly that, and Vercel/Netlify/Sentry/Grafana/Fly all ship variations. Agency and portfolio work needs motion and personality: Demo 08 Animated Headline (staggered word rise), Demo 14 Marquee Headline (counter-scrolling tickers), Demo 18 Kinetic Type (per-letter jitter), Demo 29 Glitch RGB. E-commerce and consumer brands convert on the object-forward pattern (fusiform recognition, Nielsen Norman): Demo 15 Photo Card, Demo 21 Product Shot, Demo 23 App Store with fanned phones. Hospitality and travel need scenic depth: Demo 25 Parallax Mountain triggers the dorsal-stream spatial-processing centers and extends fold-view attention by roughly 40% versus flat heroes. Pricing pages should put the price IN the hero: Demo 22 Price Card lifts click-through 30-45% versus a 'See pricing' link (Baymard finding). Restoration, nonprofit, and cause work should use Demo 09 Before/After Slider — the transformation-as-proof pattern outperforms static hero imagery by 40-60% on click-through for services with a visible outcome. Editorial and hospitality lean quiet-luxury: Demo 04 Glass over Aurora, Demo 10 Sticky Scroll Cue, Demo 11 Magazine Cover, Demo 13 Oversized Number.

The pattern used across all 30 demos: use clamp() for every scale-sensitive property. Headline font-size: clamp(24px, 5vw, 64px). Padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px). Section min-height stays at min-height: 100vh on the demo root so the themed background paints edge-to-edge in the playground iframe, but nested content boxes use max-width: 640px to 720px to lock a readable line length regardless of viewport width. For two-column heroes (Demos 02, 05, 09, 15, 21, 25, 26, 27, 30), the switch to single-column happens at max-width: 720px — one breakpoint, not five — which collapses grid or flex layouts predictably. Avoid fixed pixel widths anywhere except the inner mockup or object (Demo 21's .hs-21__device is 320px × 200px because the device silhouette needs a stable ratio). For iOS Safari specifically, 100vh jumps 60-80px mid-scroll when the address bar collapses — a Core Web Vitals CLS event. The site-wide recommendation is min-height: 100svh (small viewport height) instead, supported in every browser shipped since 2022. All 30 demos honor prefers-reduced-motion: reduce — continuous animations (parallax drift on Demo 25, blob motion on Demo 03, twinkle on Demo 28, orbit spin on Demo 30) are disabled per WCAG 2.3.3 for vestibular-disorder users. The animated ones also compositor-thread only their motion (transform + opacity), never margin/top/width/height, so Interaction to Next Paint (INP) stays under 200ms on mid-tier Android.

Pure CSS. Every one of the 30 demos ships with zero image dependencies — no PNG, no JPEG, no WebP, no external CDN. Real photos add weight (typically 40-200KB per hero photo even with WebP), licensing constraints (stock photography has re-use limits, real photography needs shoots), and Largest Contentful Paint (LCP) hits. The CSS-only patterns that replace them: stacked radial-gradient blobs with filter: blur(60px) produce the mesh-gradient look at ~1KB of CSS (Demo 03, Demo 20); animated conic-gradient with backdrop-filter: blur(20px) saturate(140%) gives you Apple Vision Pro glass over aurora (Demo 04, Demo 30); clip-path: polygon() silhouettes plus stacked linear-gradient layers paint an editorial photograph (Demo 15 — a four-layer CSS 'photograph' of a hung chore coat, roughly 3KB); SVG-shape drift primitives (Demo 06 Video Loop Hero) fake a motion reel without licensing an MP4 or dealing with autoplay policies. For products, Demo 21 uses a diagonal linear-gradient with paired inset shadows to fake brushed-aluminium bevel in pure CSS. For scenes, Demo 25 stacks three SVG mountain ranges with staggered animation-delays for genuine parallax depth. Font-loading discipline: preload the specific weights you actually render (usually one weight per font) with link rel='preload' as='font' type='font/woff2' crossorigin or FOUT/FOUC will shift the h2 baseline and blow Cumulative Layout Shift (CLS) past the 0.1 Core Web Vitals threshold. The whole approach: images cost 40-200KB and licensing hassle for a static picture; CSS costs 1-3KB, renders instantly, respects prefers-reduced-motion out of the box, and lets you re-skin the palette by editing three hex values instead of re-commissioning a shoot.

Yes — every hero uses semantic HTML, a single h2 or h1 for the headline, real anchor links for CTAs, aria-hidden on decorative SVG, WCAG 2.5.5 44×44px touch targets on interactive controls, prefers-reduced-motion guards on every animation, and contrast ratios meeting WCAG AA (most pairs hit AAA).