The hero section earns its name by doing an outsized amount of work. In the first two to four seconds a visitor lands on your page, the hero has to communicate what the site is for, who it's for, and what the visitor should do next — all before a single line of body copy is read. Get it right and everything downstream benefits. Get it wrong and you've handed a bounce to the back button.
In 2026 the gap between hero sections that convert and hero sections that merely look nice has sharpened considerably. Static, intent-focused layouts have largely displaced the old sliding carousel. Typography is doing more structural work. Color and gradient use has swung back toward boldness after years of muted minimalism. And mobile-first vertical composition is no longer optional — it's table stakes. Here is how to think about each dimension, with real Tailwind v4 code you can drop into a project today.
The layouts that are working right now
Every hero section you'll encounter in the wild is a variation on a small handful of underlying layouts. Knowing the family tree makes it much faster to make a decision and much easier to avoid reinventing a pattern that already has decades of visual vocabulary behind it.
Centered, single-column
The most durable hero layout. Everything — headline, subhead, CTA — stacks vertically down a centered axis. It communicates quickly, adapts to any viewport without gymnastics, and keeps the visual weight balanced. This is the right choice when the headline is genuinely strong enough to carry the above-the-fold experience by itself.
The failure mode is vagueness: a centered hero with a weak headline becomes a vacuum. If your headline can't do the work, pair this layout with a strong supporting visual underneath the CTA row.
Split-screen (text left, image right)
A two-column grid where content sits on one side and a photograph or illustration on the other. This layout lets a real image anchor the hero without competing with the headline for visual primacy. For service businesses — HVAC, roofing, electrical — a photo of completed work or a satisfied customer does more persuasive work here than any stock image.
On mobile the columns stack, so think carefully about which column appears first. Text first on mobile is almost always correct; the image becomes a reward below the fold rather than a distraction above it.
Full-bleed background with overlaid text
A full-width image or gradient fills the viewport and the headline/CTA live on top of it. This layout communicates category instantly — it feels like a magazine cover — but it demands tight control over contrast. A translucent dark scrim or a CSS gradient overlay over the image is the reliable solution; do not rely on finding a photo that happens to have a light area in the right place.
Asymmetric grid
A deliberate imbalance — a large headline spanning four columns, a subhead in two, a CTA off to one side — creates visual tension that reads as confident rather than accidental. This is the pattern behind the hero sections on many SaaS and agency sites in 2026. It requires stronger grid thinking than the other layouts but rewards it with a composition that feels custom even when built from utility classes.
Visual direction: what's defining 2026
Typography as structure
Large type is doing structural work that images used to do. Headlines set at clamp(3rem, 8vw, 7rem) or larger are not decoration — they are the hero's dominant visual element. The consequence is that font choice matters more than it did when type was subordinate to imagery. Geometric sans-serifs (Inter, DM Sans, Geist) remain dominant for product and SaaS contexts. High-contrast serifs (Playfair Display, Fraunces) are appearing in premium and artisan contexts. Variable fonts that compress or expand on hover add motion without JavaScript.
The typographic decision to avoid: using a large size without proportional line-height. A headline set at text-7xl with the default Tailwind line-height feels cramped. Drop it to leading-none or leading-tight and the mass reads correctly.
Color and gradients
The muted, low-saturation palettes that dominated 2022–2024 are giving way to more committed color. This is not a return to the garish web of 2010 — the gradients are more sophisticated, using radial blends and oklch color space values that stay perceptually consistent across a wider range of hue. A radial gradient bloom behind centered text has become a common visual pattern precisely because it adds depth without requiring an image asset.
In Tailwind v4 you define your gradient stops directly in the @theme block and they map to utility classes automatically. The oklch color space is especially useful here because two colors that look close in hex can drift dramatically when interpolated — oklch interpolation stays on the expected perceptual path.
Restraint in motion
Subtle entrance animations — a headline fading up 12px over 400ms — are widespread and generally harmless. Heavy motion — parallax backgrounds, looping video heroes, canvas particle systems — costs performance, triggers motion sensitivity for some users, and almost never improves conversion. The test is simple: if you removed the animation entirely, would the hero still work? If yes, question whether it earns its cost. Use prefers-reduced-motion media queries unconditionally; it is not an optional accessibility courtesy.
Building a hero in Tailwind CSS v4
Tailwind v4 dropped tailwind.config.js in favor of a CSS-first @theme directive. You define design tokens — colors, font families, spacing scales, radii — directly in your stylesheet alongside @import "tailwindcss". Those tokens generate corresponding utility classes automatically, and they ship as CSS custom properties on :root for use anywhere in your CSS.
Setting up tokens
/* src/styles/global.css */
@import "tailwindcss";
@theme {
--color-brand: oklch(55% 0.22 265);
--color-brand-light: oklch(72% 0.18 265);
--color-surface: oklch(98% 0.005 265);
--font-display: "DM Sans", sans-serif;
--font-body: "Inter", sans-serif;
--radius-hero: 1.5rem;
}
With those tokens in place, bg-brand, text-brand-light, font-display, and rounded-hero all become valid Tailwind utilities automatically — no plugin, no arbitrary value bracket needed.
Centered hero with a gradient bloom
<section class="relative isolate overflow-hidden bg-surface py-24 sm:py-32">
<!-- Radial gradient bloom behind the text -->
<div
class="absolute inset-0 -z-10"
style="background: radial-gradient(ellipse 80% 60% at 50% 0%, oklch(72% 0.18 265 / 0.25), transparent 70%);"
></div>
<div class="mx-auto max-w-3xl px-6 text-center">
<p class="mb-4 text-sm font-semibold uppercase tracking-widest text-brand">
Local SEO built in
</p>
<h1 class="font-display text-5xl font-bold leading-tight text-gray-900 sm:text-7xl">
A modern HVAC website,<br>ready to launch.
</h1>
<p class="mt-6 text-lg leading-relaxed text-gray-600">
Hand-built for contractors. Fast by default, SEO-ready on day one,
and easy to hand off to any developer.
</p>
<div class="mt-10 flex flex-wrap items-center justify-center gap-4">
<a
href="/templates"
class="rounded-hero bg-brand px-7 py-3.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-light transition-colors"
>
Browse themes
</a>
<a
href="/demo"
class="text-sm font-semibold text-gray-900 underline-offset-4 hover:underline"
>
View live demo →
</a>
</div>
</div>
</section>
A few details worth noting. The isolate class creates a new stacking context so the -z-10 gradient layer is scoped correctly and does not bleed into adjacent sections. The radial gradient is written as an inline style because it references the raw oklch value — for a reusable project you could move this into a component or a CSS custom property. The CTA row uses flex-wrap so it stacks gracefully on narrow viewports without a media query.
Split-screen hero
<section class="mx-auto grid max-w-7xl gap-x-12 gap-y-10 px-6 py-24 sm:py-32 lg:grid-cols-2 lg:items-center">
<!-- Text column -->
<div>
<p class="mb-3 text-sm font-semibold uppercase tracking-widest text-brand">
Roofing & exteriors
</p>
<h1 class="font-display text-4xl font-bold leading-tight text-gray-900 sm:text-5xl xl:text-6xl">
Built for roofers who<br>want more leads.
</h1>
<p class="mt-5 text-base leading-relaxed text-gray-600 sm:text-lg">
Every page pre-optimized for the searches homeowners actually use.
Designed to convert, not just to look good.
</p>
<div class="mt-8 flex flex-wrap gap-4">
<a
href="/templates/roofing"
class="rounded-hero bg-brand px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-brand-light transition-colors"
>
See the theme
</a>
<a
href="/viewports/roofing"
class="rounded-hero border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 hover:border-gray-400 transition-colors"
>
Live preview
</a>
</div>
</div>
<!-- Image column -->
<div class="overflow-hidden rounded-hero bg-gray-100 aspect-[4/3] lg:aspect-auto lg:h-full">
<img
src="/images/themes/ridgeline-hero.jpg"
alt="Ridgeline Roofing theme screenshot"
class="h-full w-full object-cover"
loading="eager"
fetchpriority="high"
/>
</div>
</section>
The image column uses aspect-[4/3] on small screens (a fixed ratio prevents layout shift) and switches to lg:h-full on large screens so the image fills the grid row. loading="eager" and fetchpriority="high" on the hero image are important: the browser's default lazy-load heuristic will sometimes defer the largest contentful paint image, hurting your Lighthouse score.
The details that separate good from excellent
Headline quality
No layout or visual treatment rescues a vague headline. "Welcome to our website" and "Serving your area for over 20 years" are both visually formattable but functionally empty. The best service-business headlines name the customer's outcome, not the company's existence: "Every drain cleared, same day." or "Your new roof, fully warranted, no surprises." Write the headline before designing the layout — it determines what the layout needs to carry.
CTA specificity
"Learn more" is not a call to action. It is a direction to a place that might have information. "Get a free quote", "See the live demo", "Download the theme" — these describe the action and imply the reward. In hero sections where conversion is the objective, the primary CTA label deserves as much attention as the headline.
Above-the-fold image loading
Any image that appears within the initial viewport should be marked fetchpriority="high" and should not have loading="lazy". This is one of the highest-impact Lighthouse performance improvements available at zero architectural cost. It applies to hero background images loaded via <img> tags — for CSS background-image you need a <link rel="preload"> in the document head instead.
Accessible color contrast
Gradient backgrounds create contrast gradients. A headline that passes contrast in the center of a radial gradient may fail at the edges. Test your hero at multiple viewport widths — the gradient distribution shifts as the element resizes. The WCAG AA minimum for large text is a 3:1 ratio; aim for 4.5:1 across the full range of background values the text can appear against.
A note on trends versus fundamentals
The visual patterns described here — gradient blooms, bold type scales, split-screen grids — are in style in 2026. Some of them will feel dated by 2028. The fundamentals underneath them will not: a clear headline, a single dominant call to action, images that load before anything else, and a layout that does not make the visitor work to understand what the page is for. Build the fundamentals into your component first. Layer the visual treatment on top. When the treatment dates, you update a class; you do not rebuild the section.
Hero sections are the most-iterated component in web design for a reason. They sit at the highest-leverage point on the page, and small improvements compound directly into conversion and retention. The patterns above are a starting point, not a prescription — the best hero for any given site is the one that matches what the visitor already believes they need and confirms it before they scroll.