The hero is the only section of your page every single visitor sees. Get it wrong and nobody scrolls far enough to read your pricing table. Below are 8 free hero snippets you can preview live and copy in seconds: a cinematic video-style background, an animated mesh gradient, a typography-first minimal hero, a personal portfolio card, a word-flip headline, a dark SaaS hero, an app download hero, and an editorial agency hero — all built in plain HTML, CSS and JavaScript.
Each one comes with how the effect actually works, when to reach for it, and a quick tip for customising it without breaking the layout. A hero doesn't need a video background or a hired illustrator to feel premium — most of what separates a "template" hero from a memorable one is a handful of CSS techniques applied with intent.
Every snippet below is a live, interactive preview — hover it, resize it, try it right in the article. When you find one you like, hit View / Edit Code to grab the HTML/CSS/JS or export it to React, Vue, Angular or Tailwind.
What actually makes a hero section work
Before picking a style, it helps to know what a hero is actually for. Regardless of which of the eight below you choose, every good hero does three things in the first two seconds:
- States the value proposition in one glance — the headline should answer "what is this and why should I care" without requiring the visitor to read the subheading.
- Establishes credibility fast — a stat row, an avatar stack, a client logo strip, or a star rating does more trust-building work in that first glance than another paragraph of copy.
- Points to exactly one next action — a single primary CTA, not three competing buttons. Secondary actions (watch a demo, view work) should visually defer to it.
Keep that checklist in mind as you scroll — every snippet below already implements at least two of the three, and you can borrow pieces across styles.
1. Video Background Hero
Three drifting, blurred color blobs stand in for a real video background — no file to load, no autoplay restrictions — with a scanline texture, a left-fade overlay for legible text, and a play button that opens a fullscreen video modal.
How it works: three absolutely positioned divs use radial-gradient fills with filter: blur(100px), each drifting on its own duration and delay so they never visibly synchronize — the same organic, shifting color movement you'd associate with real video footage, at zero file size. A repeating-linear-gradient striped at 4px intervals adds a faint scanline grain, and a left-to-right linear-gradient overlay darkens just the side where the text sits so it stays legible without dimming the rest of the frame. Clicking "Watch trailer" adds an .open class to a fullscreen modal with backdrop-filter: blur(12px), dismissible by the close button, a click outside, or Escape.
Best for: event and concert landing pages, entertainment and film promotion, premium brand campaigns that want cinematic weight before a real video is ready. Tip: the blob background is a placeholder — for production, drop a real <video autoplay muted loop playsinline> inside .bg-anim with object-fit: cover and delete the blob divs; the overlay, scanline, and modal code all keep working unchanged.
Grab the code: Video Background Hero
2. Minimal Hero
No gradients, no motion, no dark theme — an inline nav, a kicker label, a fluid headline, dual CTAs, and a proof-stats row on plain white, in the same restrained style Linear, Notion, and Stripe have all used.
How it works: the nav sits inline at the top of the same content column — brand on the left, links given flex: 1 to push them off the brand, a CTA button on the right — instead of a separate full-width nav bar. The headline uses clamp(36px, 6vw, 64px) for fluid scaling with no media query, and a "kicker → headline → subtitle" three-layer hierarchy sets context before the value proposition. Below a thin horizontal rule, four proof stats sit in a row separated by 1px dividers, each addressing a different objection (adoption, quality, reliability, compliance) in a single compact strip.
Best for: premium SaaS and developer-tool homepages, consulting and professional-services sites, and any product confident enough not to need a gradient or animation to sell itself. Tip: there's zero JavaScript here, so in a React framework this can ship as a pure server component — no hydration cost for a hero that never needs to update client-side.
Grab the code: Minimal Hero
3. Gradient Mesh Hero
Three large, blurred color blobs drift slowly across a dark background while a shimmer-gradient headline cycles through audience segments — the ambient, painterly aesthetic behind most modern developer-tool landing pages.
How it works: three absolutely positioned divs each carry a different-colored radial-gradient with filter: blur(80px), then drift independently via a shared keyframe played at different delays and directions, so they never visibly synchronize. The headline's cycling word swaps every few seconds by fading out, changing its text content, then fading back in, while a separate gradient sweeps continuously across it via an animated background-position on a 200%-wide gradient fill.
Best for: SaaS and dev-tool homepages, component libraries, and coming-soon pages that want visual polish before the product ships. Tip: every animation here — the drifting blobs, the shimmer sweep, the word fade — moves only transform, opacity or background-position, so it stays on the GPU compositor and won't jank even on a large full-bleed hero.
Grab the code: Gradient Mesh Hero
4. Portfolio Hero
A centered personal-branding card with a gradient-initials avatar, a pulsing "open to work" status dot, skill tags, experience stats, and social links — everything a recruiter or client needs to know in one glance.
How it works: a small green dot in the card's corner uses box-shadow for a glow ring and a blink keyframe animating opacity between 1 and 0.4 — the same "online" indicator pattern borrowed from Discord and Slack — paired with a tinted "Open to work" badge for a second, lower-key availability signal. The avatar is just a gradient-filled circle with initials and a colored box-shadow for lift, so it needs no image file until you're ready to swap in a real photo. Four social icons reuse one .soc class with inline SVG paths and a shared hover state, so adding a fifth platform is one more anchor tag, not new CSS.
Best for: developer and designer personal sites, freelancer availability pages, and conference-speaker profile pages. Tip: the status dot and badge are just color values — switch the green to amber or red (and update the blink keyframe to match) to signal "selective" or "fully booked" instead of writing a new component.
Grab the code: Portfolio Hero
5. Word Flip Hero
A single word in the headline cycles vertically through several alternatives — "Build Faster / Smarter / Better / Together" — communicating product versatility in one sentence instead of a paragraph.
How it works: every word sits stacked in a vertical flex column inside a container clipped to exactly one line's height with overflow: hidden. JavaScript measures a single word's real pixel height at runtime and sets translateY(-index × height) on the column to slide the visible window to the current word — so unlike a fixed-duration CSS keyframe, it works correctly with words of any length, and adding a new word to the cycle is a pure HTML change. The cycling words also carry a gradient text fill that matches the CTA buttons for visual coherence.
Best for: SaaS and startup landing pages, portfolio headlines that address multiple client types, and agency homepages spanning several service lines. Tip: the flip-wrap element carries aria-live="polite", so screen readers announce each new word after it transitions in — don't strip that attribute if you customize the markup.
Grab the code: Word Flip Hero
6. Startup Hero
A dark, no-JavaScript SaaS hero with a pulsing beta badge, a gradient headline, dual call-to-action buttons, an overlapping-avatar social proof row, and a trusted-by logo strip — the complete, conversion-ready pattern in one snippet.
How it works: the ambient background glow comes from two ::before/::after pseudo-elements with radial gradients — no images — plus a subtle inline-SVG noise texture layered at 3% opacity for depth. The gradient headline uses the standard background-clip: text technique, and the whole hero is pure HTML and CSS with zero JavaScript, which means it can ship as a server component in a React framework with no client-side hydration cost at all.
Best for: SaaS product launches, beta announcements, and investor or demo-day landing pages where the trusted-by strip and user count need to read as credible fast. Tip: because there's no JS dependency, this is the fastest hero on the list to ship inside a static site or a server-rendered page — swap the badge copy ("Now in public beta" → "Now live") to match your launch stage.
Grab the code: Startup Hero
7. App Download Hero
A split hero with copy and App Store/Google Play buttons on one side and a CSS-only phone mockup showing a live finance app UI on the other — the layout Notion, Linear, and Revolut all use for mobile app landing pages.
How it works: the phone frame is built entirely from CSS — a rounded rectangle with a double border simulates the bezel, a small dark rectangle forms the notch, and the "screen" is just a flex column of ordinary divs (header, balance card, bar chart, transaction list). Nothing here is an image or screenshot, so it loads instantly and stays crisp at any pixel density. The store buttons reuse one base class with the official two-line label layout ("Download on the" / "App Store") matching Apple and Google's own badge guidelines.
Best for: fintech, productivity, and lifestyle app landing pages, Product Hunt launch days, and coming-soon pages collecting pre-launch signups. Tip: the phone mockup hides automatically below 700px via a media query — on mobile the text column simply centers itself, so you don't need a separate mobile layout.
Grab the code: App Download Hero
8. Agency Hero
A bold, three-column editorial layout with an oversized serif headline, a service list that cycles its active item, stat blocks, and a CSS marquee ticker — built entirely in black, white, and grey to let the typography carry the design.
How it works: the layout is a flex row with fixed-width left and right columns and a fluid center column, separated by thin 1px borders for a newspaper-column feel. The headline mixes a 900-weight serif with a 400-weight italic accent word for contrast without adding color. The marquee ticker duplicates its content exactly twice and animates translateX to -50% — since that's precisely the width of one copy, the loop restarts invisibly with zero JavaScript involved.
Best for: creative agencies, design studios, and senior designer or art director portfolios that want to signal craft through typography rather than gradients. Tip: the monochrome palette is intentional — add exactly one brand color to the active service underline and the CTA hover state, and resist adding more; that restraint is what reads as "designed" rather than "templated."
Grab the code: Agency Hero
How to drop these into your project
Every snippet is framework-agnostic, so the workflow is the same wherever you're building:
- Open the snippet and hit View / Edit Code to see the HTML, CSS and JS in separate tabs.
- Paste the HTML into your markup, the CSS into your stylesheet, and the JS (if any) before your closing
</body>tag. - Prefer a component? Use the one-click export to React, Vue, Angular or Tailwind and wire the copy, colors, and stats to your own data.
- Swap the placeholder headline, stats, and CTA links for your real product before shipping — every one of these is a starting point, not a finished page.
Keep your hero fast and accessible
A hero that looks great but tanks your Lighthouse score or excludes users isn't doing its job. Three rules cover almost every case:
- Animate only
transform,opacity, and CSS custom properties — anything that triggers layout or paint on every frame (like animatingwidthortopdirectly) will jank on lower-end devices. - Respect
prefers-reduced-motion— wrap drifting blobs, shimmer sweeps, and cycling words in a media query that freezes them for users who've asked for less motion, without removing the visual design. - Keep the headline as real, selectable text — gradient and shimmer effects should use
background-clip: texton genuine text nodes, never a background image standing in for the words, so screen readers and copy-paste both still work.
Final Thought
These are just 8 of dozens of hero styles you can copy for free — no login, no sign-up, no dependency to install. The underlying techniques — blurred radial-gradient blobs standing in for video, fluid clamp() typography, pulsing status-dot indicators, runtime-measured word cycling, and pure-CSS phone mockups — are the same handful of ideas remixed across every award-winning landing page you've bookmarked. Once you've built a few of these by hand, you stop reaching for a hero template and start reaching for the specific technique the page actually needs.
Preview any of them live, tweak the code, and export to your framework of choice in one click. Browse the full collection at FWD Tools UI Snippets — Heroes — it's free and runs entirely in your browser.
