Gradient Background
A hero on a rich gradient background with a centered headline, subtext, and CTA. A bold, color led opener for product and campaign landing pages.
A hero on a rich gradient background with a centered headline, subtext, and CTA. A bold, color led opener for product and campaign landing pages.
Search blocks by description or jump to a page.
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.
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
After
The simplest use is a product tagline and a short description, but the frame works for several other scenarios:
Tip: keep the body copy to two or three lines so the buttons stay visible above the fold on most laptops without scrolling.