sectiongradientbeginner

Gradient Hero Section

A full-width hero section with gradient background, centered content, and a CTA button.

Preview

Build Something Amazing

Create beautiful interfaces with Tailwind CSS gradients.

<section class="min-h-[60vh] flex items-center justify-center bg-gradient-to-br from-blue-600 via-purple-600 to-pink-500 px-4">
  <div class="text-center max-w-2xl">
    <h1 class="text-4xl md:text-6xl font-extrabold text-white mb-6">Build Something Amazing</h1>
    <p class="text-xl text-white/80 mb-8">Create beautiful interfaces with Tailwind CSS gradients.</p>
    <a href="#" class="inline-block px-8 py-4 bg-white text-purple-700 font-bold rounded-xl hover:shadow-xl transition-all">Get Started</a>
  </div>
</section>

Color Breakdown

Gradient Start

from-blue-600

#2563eb

Gradient Middle

via-purple-600

#9333ea

Gradient End

to-pink-500

#ec4899

Text

text-white

#ffffff

Button Background

bg-white

#ffffff

Button Text

text-purple-700

#7e22ce

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:from-blue-800 dark:via-purple-800 dark:to-pink-700

Use Cases

SaaS landing pagesProduct launch pagesPortfolio headers

Browser Support

All modern browsers. Gradients supported in Chrome 26+, Firefox 16+, Safari 7+, Edge 12+.

Related Recipes

Gradient Button

button - beginner

Pill Button

button - beginner

Gradient Border Card

card - advanced

Image Overlay Card

card - intermediate

Pricing Card

card - intermediate

Feature Card

card - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

Can I change the gradient direction?▼

Yes. Replace bg-gradient-to-br with bg-gradient-to-r (right), bg-gradient-to-b (bottom), or any other direction variant.