About this block

Gradient Background is a centered hero with a layered ambient glow behind the content. Two large blurred shapes sit off the top of the viewport and bleed downward, giving the page an atmospheric color wash. Within that, a short overline phrase sits above a bold headline, followed by a single paragraph of supporting text, and then a pair of side by side buttons, a primary action and an outline secondary action.

The overline, headline, and body copy are independent strings, so you can swap them freely without touching the layout. The two buttons can be relabeled or reduced to one if your page only needs a single call to action.

When to use

This layout suits a product or campaign page that needs to feel distinctive from the moment a visitor lands. The color wash draws attention without requiring an image or illustration, which makes it a practical opening for an AI assistant product where the interface itself is not yet visual enough to screenshot. It is a stronger opening than a plain white centered hero when you want warmth and personality, and less distracting than a looping video or animated gradient when your copy needs to carry the message.

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

Before

• Announcement Banners to surface a launch or version note above the fold before the hero loads

After

• Feature Sections to expand on the headline's promise with specifics after the visitor is oriented
• Social Proof Hero if you want to follow up with logos and ratings before the main body

What you can display

The simplest use is a product tagline and a short description, but the frame works for several other scenarios:

• A campaign headline. Use the overline for the campaign name and the heading for the core message so seasonal or event pages stay focused.
• An AI product pitch. Lead with what the assistant does in one sentence and let the color wash signal that this is something new, not another plain SaaS tool.
• A waitlist opener. Swap the secondary button for a link to a sign up form and let the subtext explain what the visitor is joining.

Tip: keep the body copy to two or three lines so the buttons stay visible above the fold on most laptops without scrolling.