Hero Section Templates

5 free, editable hero section templates. Above-the-fold hero sections with a headline, supporting text, call-to-action buttons and an image, screenshot or background photo. Change the text, images, colours and fonts in your browser, add a GSAP animation, then export HTML, React or Vue.

Hero

Related Tools

8 toolsView all →

1–6 of 8

Website Builder

Email Templates

Social Post Templates

GSAP Playground

Color Palette Generator

Font Pairing Tool

Hero Section Templates

5 sections · Responsive · GSAP animation · HTML, React & Vue

Updated October 20, 2026

About these sections

Hero Section Templates

The hero is the first thing every visitor sees, and it decides in a few seconds whether they keep reading. A good hero states what you offer, who it is for and what to do next, with one clear button and an image that backs up the promise.

These hero sections cover the most common patterns: the SaaS Split Hero with a product screenshot, the dark Centred Gradient Hero, the full-width Image Background Hero, the App Product Hero with store buttons and a phone mockup, and the Personal Portfolio Hero for developers and freelancers. Every one is editable in the browser, responsive through container queries, animated with GSAP, and shares one theme with the rest of the library, so features, pricing and footer sections will match. Export a single HTML file, a ZIP with your images, a React component or a Vue component.

SaaS Split Hero: A two-column SaaS landing page hero: an announcement badge linking to news, a bold headline with a highlighted phrase, supporting text, primary and secondary buttons, a social-proof line and a product screenshot in a glowing frame. It stacks on narrow screens.

Centred Gradient Hero: A centred, dark landing page hero with soft glowing gradients drawn in CSS: a small eyebrow, a large headline, supporting text, two buttons, a reassurance note and an optional wide product screenshot that rises from the bottom of the section.

Image Background Hero: A full-width hero with your photo as the background, a dark gradient overlay that keeps text readable, a small label, a large white headline, supporting text, two buttons and an optional row of three stats along the bottom.

App Product Hero: A mobile app landing hero: a headline and supporting text, App Store and Google Play download buttons, a star rating line, and a phone screenshot with two floating highlight cards, on a soft gradient background.

Personal Portfolio Hero: A personal website hero for designers, developers and freelancers: an "available for work" badge with a live dot, a friendly "Hi, I'm…" headline, a short bio, buttons for your work and contact, social links, and your photo in an organic blob frame.

Real-world uses

Best Uses for Hero Sections

🚀

SaaS homepage hero (SaaS Split Hero)

Lead your homepage with a clear promise, a free-trial button, a demo link and a real dashboard screenshot so visitors understand the product before they scroll.

📣

Feature or launch landing page (SaaS Split Hero)

Use the badge to point to your changelog or launch post, and swap the screenshot for the new feature so returning visitors see what changed.

🤖

AI and developer tool launches (Centred Gradient Hero)

Lead with a bold promise on a dark gradient, a "Get started free" button and a screenshot of the app, the style visitors expect from modern tech products.

🧪

Public beta announcement (Centred Gradient Hero)

Use the eyebrow for "Now in public beta", the note for "Free during beta" and the secondary button to link to a short product tour.

🏔

Travel and tour operators (Image Background Hero)

Show your most beautiful destination photo with a headline about the experience, buttons for trips and a film, and stats for routes, reviews and group size.

🏨

Hotels, restaurants and venues (Image Background Hero)

Use a photo of the space or the food, a "Book a table" or "Check availability" button and stats such as rating, rooms or years open.

How it’s different

How These Section Templates Are Different

✎

Editable, not just copyable

Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.

◐

One theme for every section

Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.

⇲

Responsive by container

Container queries make each section adapt to its own width, in a full page, a column or a page builder.

✦

GSAP animation built in

Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.

</>

HTML, React and Vue

Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.

◍

Free, private, saved

No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

1
Pick a sectionOpen one of the hero sections above. Your edits autosave in your browser as you go.
2
Edit the contentChange the text, buttons, links and images in the panel, and switch optional parts on or off.
3
Add your brandPick colours, fonts, radius and width, or apply your saved brand kit; every section shares the same theme.
4
Animate and previewChoose a GSAP entrance effect, press Play animation, and check desktop, tablet and mobile.
5
ExportDownload HTML or a ZIP, copy a React or Vue component, or fork it into My Code.

Got questions?

Frequently Asked Questions

A clear headline that says what you offer, one or two sentences of supporting text, a primary call-to-action button (and optionally a secondary one), and an image, screenshot or photo that supports the message. Social proof such as ratings or customer counts helps too.

Tall enough to show the headline, buttons and the start of the image on a laptop screen without scrolling, usually around 600 to 800 px on desktop. On phones it is fine for the hero to be taller than the screen, as long as the headline and main button appear first.

Yes. Every section exports as a React component (JSX with its CSS) or a Vue single-file component, and the GSAP animation is included. You can also download plain HTML and CSS.

SaaS Split Hero: A two-column SaaS landing page hero: an announcement badge linking to news, a bold headline with a highlighted phrase, supporting text, primary and secondary buttons, a social-proof line and a product screenshot in a glowing frame. It stacks on narrow screens. Centred Gradient Hero: A centred, dark landing page hero with soft glowing gradients drawn in CSS: a small eyebrow, a large headline, supporting text, two buttons, a reassurance note and an optional wide product screenshot that rises from the bottom of the section. Image Background Hero: A full-width hero with your photo as the background, a dark gradient overlay that keeps text readable, a small label, a large white headline, supporting text, two buttons and an optional row of three stats along the bottom. App Product Hero: A mobile app landing hero: a headline and supporting text, App Store and Google Play download buttons, a star rating line, and a phone screenshot with two floating highlight cards, on a soft gradient background. Personal Portfolio Hero: A personal website hero for designers, developers and freelancers: an "available for work" badge with a live dot, a friendly "Hi, I'm…" headline, a short bio, buttons for your work and contact, social links, and your photo in an organic blob frame.

Yes. Every section is free for personal and commercial websites, with no account and no watermark. Everything runs in your browser and your edits are saved locally.