Hero Sections
Fullscreen gradient heroes, 50/50 split layouts, and animated headline rotators — pure HTML/CSS patterns with zero JS dependencies, ready to deploy in a single Claude conversation.
Code Patterns
Hero section patterns
Every pattern is pure HTML and CSS — no JS dependencies, no animation libraries. Claude generates the full hero section to match your site’s theme and deploys it live on your server.
Pattern 1 — Fullscreen Gradient Hero
Centred hero with gradient headline text, a badge label, sub-heading, and dual CTA buttons. Full-viewport height with a diagonal exit divider and subtle radial background glow. The most versatile starting point for any site type.
- Full viewport height with
min-height: 100vh - Gradient text headline via
background-clip: text; -webkit-background-clip: text - Badge label with animated status dot (CSS
@keyframespulse) - Two CTA buttons: primary filled and ghost outline
- Radial gradient background glow centred on the heading
- Diagonal exit divider via CSS
clip-path: polygon() - Mobile: sub-heading scales down, buttons stack vertically below 480px
Build a fullscreen hero section for my [site type] site. Heading: “[your headline]” with gradient text on “[key phrase]”. Sub-heading: “[your sub-heading]”. Two buttons: “[Primary CTA]” linking to /pricing, and “[Secondary CTA]” linking to /how-it-works. Brand colour: [your hex colour]. Include a diagonal divider below the hero. CSS in theme.css. Deploy to my Claude CMS site.
Pattern 2 — Split-Layout Hero
50/50 CSS Grid hero with headline and CTAs on the left, and a styled image or video panel on the right. A stat row beneath the buttons adds social proof. Collapses to single column on mobile, text above media.
- Two-column grid:
grid-template-columns: 1fr 1fr, 80px gap - Right panel: rounded image with accent-coloured drop shadow and border
- Optional: swap right panel for an
<iframe>or<video>embed - Aspect ratio locked media panel:
aspect-ratio: 4/3 - Stat row below CTAs: 3 metrics in monospace font with separator dots
- Mobile: single column, image moves below text at 768px
- Badge, heading, body text, and CTA row all in the left column
Build a split-layout hero for my homepage. Left: badge “[label]”, headline “[your headline]”, body “[your body text]”, primary button “[CTA]” and ghost button “[CTA]”, stat row: “[stat1] · [stat2] · [stat3]”. Right: image at /assets/images/[image].jpg with rounded corners and an orange drop-shadow. Mobile collapses to single column. CSS in theme.css.
Pattern 3 — Animated Headline Rotator
Hero with a rotating keyword in the headline — CSS @keyframes cycles through a configurable word list with a fade-and-slide transition. No JS required, and fully safe for users who prefer reduced motion.
- Rotating words in a fixed-width inline
<span>to prevent layout shift - Animation:
opacityfade +translateYslide via@keyframes - Each word stacked with
position: absoluteand its ownanimation-delay @media (prefers-reduced-motion: reduce): shows only the first word, no animation- Configurable word list — edit the HTML only, no CSS or JS changes needed
- Compatible with Pattern 1 (centred) or Pattern 2 (split) hero layouts
Add an animated word rotator to my homepage hero heading. Static text: “Build your [word] with AI”. The [word] rotates through: portfolio, business, blog, store, booking site. Use CSS @keyframes only — no JS. Each word fades in and slides up, 2.5s per word. Respect prefers-reduced-motion by showing only the first word static. CSS goes in theme.css.
Every hero section includes
Responsive by default
Every pattern collapses cleanly to mobile. Buttons stack, text scales, images reorder — no extra CSS overrides or manual breakpoint tuning needed.
Matched to your theme
Claude reads your existing theme.css and generates heroes that use your colours, fonts, and spacing variables — not a generic template applied on top.
Zero dependencies
All three patterns are pure HTML and CSS. No JavaScript framework, no animation library, no CDN link required.
Instant iteration
Swap the headline, adjust the CTA text, change the layout. Describe the change to Claude and it’s updated on your live site within seconds.
Pair hero sections with
Combine hero sections with these building blocks for a complete page design.
JS Animations
Add scroll-reveal and border-glow entry animations to your hero and feature sections.
View patterns →Image Galleries
CSS Grid masonry, filterable portfolios, and full-screen lightbox patterns.
View patterns →Contact Forms
Simple enquiry forms, multi-step quote builders, and SMTP-delivered submissions.
View patterns →Deploy your first hero section today
From £6.99/month. First month free — no credit card required.