Gradient Mesh Hero

A hero with a soft mesh gradient behind a centered headline and CTA. Gives a calm, premium backdrop to SaaS, design, and startup landing pages.

import { Button } from '@/components/ui/button';
import { ArrowRight } from 'lucide-react';

export default function GradientMeshHero() {
  return (
    <div className="relative overflow-hidden">
      {/* Gradient background with mesh */}
      <div className="from-primary/20 via-background to-background absolute inset-0 z-0 bg-gradient-to-br">
        <div className="absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] [background-size:16px_16px] dark:bg-[radial-gradient(#333_1px,transparent_1px)]"></div>
      </div>

      <div className="relative z-10 container mx-auto px-4 py-24 md:px-6 md:py-36 2xl:max-w-[1400px]">
        <div className="mx-auto flex max-w-4xl flex-col items-center space-y-10 text-center">
          <div className="space-y-6">
            <div className="bg-primary/10 text-primary inline-block rounded-full px-3 py-1 text-sm font-medium">
              Introducing Our Latest Innovation
            </div>
            <h1 className="from-primary to-primary/50 dark:from-primary dark:to-primary/70 bg-gradient-to-r bg-clip-text text-4xl font-bold tracking-tight text-transparent sm:text-5xl md:text-6xl lg:text-7xl">
              Transform your digital experience
            </h1>
            <p className="text-muted-foreground mx-auto max-w-[700px] md:text-xl lg:text-2xl">
              Discover our powerful platform with cutting-edge features designed
              to elevate your workflow and boost productivity.
            </p>
          </div>

          <div className="mx-auto flex w-full max-w-md flex-col gap-4 sm:flex-row">
            <Button size="lg" className="w-full" asChild>
              <a href="#">
                Get Started
                <ArrowRight className="ml-2 h-4 w-4" />
              </a>
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="dark:text-foreground dark:hover:text-primary w-full"
              asChild
            >
              <a href="#">Watch Demo</a>
            </Button>
          </div>

          <div className="flex items-center justify-center gap-8 pt-4">
            <div className="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="text-primary h-6 w-6"
              >
                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
                <path d="m9 12 2 2 4-4" />
              </svg>
              <span className="dark:text-gray-200">Free 14-day trial</span>
            </div>
            <div className="hidden items-center gap-2 sm:flex">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="text-primary h-6 w-6"
              >
                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
                <path d="m9 12 2 2 4-4" />
              </svg>
              <span className="dark:text-gray-200">
                No credit card required
              </span>
            </div>
            <div className="hidden items-center gap-2 md:flex">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="text-primary h-6 w-6"
              >
                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
                <path d="m9 12 2 2 4-4" />
              </svg>
              <span className="dark:text-gray-200">Cancel anytime</span>
            </div>
          </div>
        </div>
      </div>

      {/* Abstract shapes */}
      <div className="bg-primary/10 absolute top-1/4 -left-20 h-64 w-64 rounded-full blur-3xl"></div>
      <div className="bg-primary/10 absolute -right-20 bottom-1/4 h-64 w-64 rounded-full blur-3xl"></div>
    </div>
  );
}

About this block

Gradient Mesh Hero is a full viewport centered hero. A soft diagonal color wash fills the background, overlaid by a dot grid that fades to transparent at the edges to create the mesh effect. Two large blurred circles sit at the left and right edges, adding depth without competing with the content. In the center, a small pill badge sits above a large headline, followed by a subheading paragraph. Below that, a primary "Get Started" button and an outlined "Watch Demo" button sit side by side. A row of three check items (free trial, no credit card, cancel anytime) closes the stack.

All of the text content is independent. You can rewrite the badge label, headline, and subheading freely. The two buttons accept any label and destination. The three reassurance items are plain text spans so you can swap them for the commitments that match your product without touching the layout.

When to use

This block suits a top of page opening for a platform that needs to feel calm and trustworthy before a visitor scrolls further. The muted mesh background gives a premium, considered look without the visual noise of motion effects. For a logistics and delivery platform, that restraint works well because buyers in that space are evaluating reliability first and spectacle not at all. It works better than an animated or particle hero when you want the headline and the reassurance row to carry the weight of the conversion.

A natural flow around it on a Marketing (Legacy) page:

Before

Announcement Banners to float a launch or promo message just above the fold before the hero loads

After

Feature Sections to expand on the platform capabilities the headline hints at
Stats to back up the headline with concrete numbers after the visitor clears the fold

What you can customize

The three main content zones can be changed independently of each other:

Badge and headline. Swap the pill text for a product name or launch phrase, and rewrite the headline to match your primary value statement.
Call to action pair. Change the primary button to a signup or booking link and the outline button to a video or demo modal target.
Reassurance row. Replace the trial and billing items with the trust signals most relevant to your buyers, such as ISO certification, SLA uptime, or dedicated onboarding support.

Tip: keep the subheading to two lines at desktop width so the CTA pair stays visible without the visitor needing to scroll.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

Announcement Banners to float a launch or promo message just above the fold before the hero loads

After

Feature Sections to expand on the platform capabilities the headline hints at
Stats to back up the headline with concrete numbers after the visitor clears the fold

What you can customize

The three main content zones can be changed independently of each other:

Badge and headline. Swap the pill text for a product name or launch phrase, and rewrite the headline to match your primary value statement.
Call to action pair. Change the primary button to a signup or booking link and the outline button to a video or demo modal target.
Reassurance row. Replace the trial and billing items with the trust signals most relevant to your buyers, such as ISO certification, SLA uptime, or dedicated onboarding support.

Tip: keep the subheading to two lines at desktop width so the CTA pair stays visible without the visitor needing to scroll.

Gradient Mesh Hero

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize