How to implement Gradient Hero Section in Html

Eye-catching hero section with gradient background, headline, and CTA buttons

Quick Answer

Use bg-gradient-to-br with from-/via-/to- colour stops for the background, then centre content with flex items-center min-h-screen and scale typography responsively with text-4xl md:text-6xl.

Code Snippet

1<section class="relative bg-gradient-to-br from-indigo-900 via-indigo-800 to-purple-900 overflow-hidden">
2  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-36 text-center">
3    <div class="inline-flex items-center gap-2 bg-white/10 border border-white/20 rounded-full px-4 py-1.5 mb-8">
4      <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
5      <span class="text-xs font-medium text-white/90">Now in public beta</span>
6    </div>
7    <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold text-white leading-tight tracking-tight mb-6">
8      Ship faster with
9      <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 to-purple-300">beautiful UI</span>
10    </h1>
11    <p class="max-w-2xl mx-auto text-lg md:text-xl text-white/70 mb-10 leading-relaxed">Stop writing CSS from scratch. Build stunning interfaces with Tailwind utility classes and ship your product in record time.</p>
12    <div class="flex flex-col sm:flex-row gap-4 justify-center">
13      <a href="#" class="inline-flex items-center justify-center gap-2 bg-white text-indigo-900 font-semibold px-8 py-3.5 rounded-xl hover:bg-indigo-50 transition-colors">Get started free</a>
14      <a href="#" class="inline-flex items-center justify-center gap-2 border border-white/30 text-white font-semibold px-8 py-3.5 rounded-xl hover:bg-white/10 transition-colors">View demo</a>
15    </div>
16    <p class="mt-10 text-sm text-white/50">Trusted by <span class="font-semibold text-white/80">10,000+</span> developers worldwide</p>
17  </div>
18</section>

What is Gradient Hero Section?

The hero section is the most important part of any landing page — it is the first thing visitors see. This Tailwind CSS hero uses a diagonal gradient background, large bold typography, a supporting subtitle, primary and secondary CTA buttons, and a subtle social-proof badge. Everything is responsive by default.

How It Works

1bg-gradient-to-br from-indigo-900 via-indigo-800 to-purple-900 produces the diagonal gradient without any custom CSS
2min-h-screen flex items-center vertically centres the content block in the full viewport
3text-4xl sm:text-5xl md:text-7xl scales the headline across breakpoints automatically
4bg-clip-text text-transparent with a gradient enables a gradient text effect on the headline span

Common Use Cases

SaaS landing pages - Introduce your product with a bold value proposition
Portfolio sites - Make a strong first impression with your name and headline
Product launches - Announce new products with a compelling hero
Marketing campaigns - Drive sign-ups with a focused above-the-fold layout

Key Benefits

Immediate visual impact with Tailwind gradient utilities
Fully responsive from mobile to wide desktop screens
Easy to swap gradient colors for any brand palette
Accessible text contrast on gradient backgrounds

Common Mistakes to Avoid

Using light text colours on a light gradient, creating poor colour contrast and failing WCAG AA
Omitting horizontal px- padding, causing text to touch screen edges on mobile
Not wrapping the headline in text-balance, leading to ragged line breaks on medium screens

Quick Tips

Click the "Copy" button above to copy the code to your clipboard
This code is production-ready and can be used in your projects immediately
Check out related snippets below for more html examples

Frequently Asked Questions

How do I add an animated gradient to a Tailwind hero?

Define a CSS @keyframes animation that shifts background-position on a background-size: 200% gradient. Apply it via a custom animate- class in your Tailwind theme config.

How do I add a background image with a dark overlay in Tailwind?

Set the section to relative, add the image via bg-[url('/hero.jpg')] bg-cover bg-center, then place an absolute inset-0 bg-black/60 div as the overlay before your content.

Related Snippets

html

intermediate

Pricing Table

Three-tier pricing table with a highlighted popular plan using Tailwind CSS

pricingtablecards+2

About This Html Code Snippet

This free html code snippet for gradient hero section is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this beginner-level example will help you implement gradient hero section quickly and correctly.

All snippets in the Snippetly library follow html best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses html.

Tags: hero, gradient, landing-page, cta, typography | Language: html | Difficulty: beginner | Category: Tailwind CSS

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started Free Browse More Snippets