30 CSS Hero Sections
A CSS hero section is the first full-bleed band of a landing page where visitors get pitched in 3 seconds. These 30 hand-coded heroes are full-page landing-section starters you can drop into a marketing site today — find-and-replace the headline, swap the CTA, and ship.
01 / 30
Centered Classic
Pure CSS 
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.
02 / 30
Split with Mockup
Pure CSS 
Two-column hero with copy left, an SVG-painted dashboard mockup right. Rust red and ochre on deep brown — the heritage industrial / workshop aesthetic.
03 / 30
Gradient Mesh
Pure CSS 
Tropical mesh gradient — overlapping radial blobs in mango, papaya, and dragon fruit on a warm coral base. The Stripe / Linear gradient hero, but turned up to a sunset.
04 / 30
Glass over Aurora
Pure CSS 
Frosted-glass card floating over a calm spa aurora — pale mint, champagne gold, soft rose. The wellness / luxury beauty editorial treatment.
05 / 30
Terminal Dev Hero
Pure CSS 
Vintage-CRT terminal hero — phosphor green text + amber prompt on a warm beige paper backdrop. The 1970s computing aesthetic for a modern dev tool.
06 / 30
Video Loop Hero
Pure CSS 
Memphis-modern video-pretender — geometric SVG shapes oscillating like a video loop, pinned behind cobalt-on-bone copy with a lemon CTA. No real video, no licensing.
07 / 30
Social Proof Hero
Pure CSS 
Mediterranean-tone social-proof hero — star rating pill above the headline, customer logo wall on warm cream, olive serif headlines with aubergine accents.
08 / 30
Animated Headline
Pure CSS 
1950s-diner animated headline — words lift into view with staggered delay, retro coral and ivory on jet black, neon-script CTA. Flips between two taglines on a loop.
09 / 30
Before/After Hero
Light JS 
Native <code><input type="range"></code> drives a CSS clip-path slider that wipes between a "before" desert scene and an "after" lush scene. Burnt orange + petrol blue + cream.
10 / 30
Sticky Scroll Cue
Pure CSS 
Tall full-bleed hero with a bouncing scroll indicator at the bottom. Forest emerald on birch with a soft yellow CTA — the cabin / retreat brand aesthetic.
11 / 30
Magazine Cover
Pure CSS 
Print-magazine cover treatment — issue stamp, oversized italic serif headline, vertical spine label, foil-stamped corner number. Plum and champagne on linen.
12 / 30
Asymmetric Type
Pure CSS 
Construction-site asymmetric typography — broken across columns with intentional misalignment, hi-vis safety yellow on concrete grey, black hard rules.
13 / 30
Oversized Number
Pure CSS 
Vintage wine-label poster — a massive faded burgundy "1924" set behind italic serif copy with gold-leaf accents on cream paper.
14 / 30
Marquee Headline
Pure CSS 
A single phrase scrolls horizontally on a loop with a counter-direction line beneath. Hot tangerine on chocolate brown — the streetwear / drop-culture treatment.
15 / 30
Photo Card Hero
Pure CSS 
Aesop / Apple-style full-bleed photo with copy in the bottom-left corner. Desaturated denim photograph painted in CSS, rust accent, linen card overlay.
16 / 30
Brutalist Text-Only
Pure CSS 
Raw Swiss-punk brutalist hero — pure black, traffic-cone orange highlight, acid lime accent, hard 8px offset shadows. No images, no soft anything.
17 / 30
Vertical Type Hero
Pure CSS 
Japanese traditional vertical typography — headline reads top-to-bottom using <code>writing-mode: vertical-rl</code>. Indigo on washi-paper white, vermillion seal stamp.
18 / 30
Kinetic Type Hero
Pure CSS 
Rave-poster kinetic typography — letters rotate, scale, and float individually using per-letter delay. Acid green and magenta on pure black with strobe-like accents.
19 / 30
Bento Hero
Pure CSS 
Apple-style bento hero — one large headline tile with stat / quote / pill cells fanning around it. Matte-ceramic palette: salmon, terracotta, ivory, olive.
20 / 30
Gradient Text Spotlight
Pure CSS 
Oversized headline with an animated marigold → ruby → grape gradient sweeping across the letters. The Linear / Apple wordmark shimmer treatment.
21 / 30
Product Shot Hero
Pure CSS 
Apple-keynote product shot — a CSS-painted device front-and-centre with floating feature badges that pulse around it. Ice blue + chrome silver on warm white.
22 / 30
Price Card Hero
Pure CSS 
Heritage-banking pricing-led hero — copy left, single-tier brass-on-forest pricing card right. The 37signals-style "we have one price" treatment with a vintage finance feel.
23 / 30
App Store Hero
Pure CSS 
iOS-pastel app-launch hero — three phone mockups fanned in lavender, soft pink, powder blue, with App Store and Google Play CTA pills below.
24 / 30
Neon CTA Hero
Pure CSS 
Tokyo-cyberpunk neon CTA — pure black backdrop, neon pink and electric cyan glows, single CTA that breathes with a soft pulse. The conversion-funnel pattern.
25 / 30
Parallax Mountain
Pure CSS 
Layered SVG mountain silhouettes drift at different speeds — glacier blue and pine on alpine snow. The outdoor / travel-brand parallax landscape.
26 / 30
Isometric Room
Pure CSS 
Cozy WFH isometric — a CSS-painted desk + laptop + plant + lamp scene rendered with `transform: skewY()`. Mauve, dusty rose, and sage — the calm-productivity aesthetic.
27 / 30
3D Card Stack
Pure CSS 
Three luxury-cosmetics product cards in 3D perspective, fanning forward on hover. Champagne and soft blush on jet — the high-end beauty / fragrance treatment.
28 / 30
Particle Starfield
Pure CSS 
Pure-CSS starfield — dots positioned via radial-gradient on a deep-navy backdrop. Electric yellow accent and dim white copy. No canvas, no per-particle DOM.
29 / 30
Glitch Text Hero
Pure CSS 
VHS-glitch hero — RGB-channel offsets create a tape-static glitch effect. VHS red and tape blue against a static-gray background, the analogue cyberpunk treatment.
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
What is a CSS hero section?
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.
Should a hero be exactly 100vh tall?
Not always. Use `min-height: 100vh` for a true full-screen statement (campaign sites, agency portfolios), but `min-height: clamp(380px, 60vh, 720px)` is more practical for SaaS — tall enough to feel intentional, short enough that critical content below the fold isn't hidden on landscape laptops.
How do I make a hero section responsive?
Use `clamp()` for headline font sizes (`clamp(24px, 5vw, 64px)`), `padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px)` for breathing room that scales, and a single breakpoint at 720px to switch split-column layouts to stacked. Avoid fixed pixel widths anywhere.
Do I need a background image?
No — these heroes use only inline SVG illustrations and pure-CSS gradients. Real photos add weight and licensing constraints; for visual richness, stack `radial-gradient` blobs (mesh gradient pattern) or `backdrop-filter: blur()` over coloured shapes (glassmorphism). Both rival photographic richness without the bytes.
Are these heroes accessible?
Yes. Every hero uses semantic HTML — `<section>` for the band, exactly one `<h1>` for the headline, real anchor links for CTAs. Animations honour `prefers-reduced-motion`, decorative SVG carries `aria-hidden="true"`, and color contrast on copy meets WCAG AA.
Related collections
15 CSS Footer Designs
15
15 hand-coded CSS footer designs — aurora-drift, newspaper masthead, mega multi-column, CTA stripe, trust badges, vinyl record, neon sign, FAQ drawer, language switcher, hover wave and more. Copy-paste ready.
footer page footer css footer
Responsive
24 CSS Grid Layouts
24
24 hand-coded CSS grid layouts — holy grail, 12-column, bento, masonry, subgrid, dashboard, kanban, container queries and more. Pure CSS, copy-paste ready.
css grid grid layout css layout
Responsive
21 CSS Pricing Sections
21
21 hand-coded CSS pricing sections — three-tier cards, comparison tables, billing toggles, usage sliders, per-seat calculators. Copy-paste ready, accessible, mobile-first.
pricing section saas pricing pricing table
Responsive