Creating Multi-Gradient Background Sections with Generator
With Generator’s advanced styling engine, you can layer multiple color stops and transparency levels directly within your native drag-and-drop sections.
This allows you to create depth and movement that traditionally required custom CSS, all while staying within the intuitive HubSpot editor.
Dark Theme
Design High-Contrast Layouts with Built-in Dark Mode Support
Generator gives you total control over your section "surfaces." Easily switch to dark backgrounds to create a premium, cinematic feel that highlights your most important content.
Optimized for AI Search
High-contrast bullet points
Organize related points to signal expertise.
Product spotlight
Lead with your hero change text.
The hero is your first chance to earn trust and a click—use this centered block above the fold on home, pricing, or campaign pages, then align headline, copy, and CTA with search and ads.
$259,420 → just 2.22% of the $11,684,800 value delivered
That's $45 created for every $1 spent
Unlock 11.6M+ in value—tax credits, deductions, and valuation gains—while staying compliant.
Estimates provided by this calculator are for informational purposes only and do not constitute financial, tax, or legal advice. The figures shown are illustrative and not a binding quote. Actual R&D credits, Cap Labor amounts, and CodeROI fees depend on your company's specific facts, eligible activities, and applicable tax laws. Estimates assume timely, accurate data and may change without notice. Use of this tool does not create a client relationship. Please consult your CPA or tax advisor before making financial decisions.
Easy to start Powerful to scale
The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.
Section Header
Left-Anchored Section Header
Eyebrow, heading, and subtext sit in a left-aligned seven-column band with extra space below before the next section. Use it when your page hierarchy should read from the left, or where a centered header would fight the content below.
Section Header
Section Header
Use this space to give visitors a brief overview of what this section covers and what they can expect to find below.
Anchor the grid with one tall card
Use this module for your main story: a headline and short supporting copy. The height is set for a bento "hero" cell so visitors see one clear message beside the smaller tiles.
Second story in the right column
This tile uses the same Offer Card module with a shorter minimum height. Add a supporting benefit, proof point, or link—edit the rich text independently of the tall card.
Complete the bento: third tile
Use the bottom card for pricing, a resource, or another CTA. All three instances share one card style from the section—swap copy and links in each module without changing the layout.
Section Header
Section Header
Use this space to give visitors a brief overview of what this section covers and what they can expect to find below.
Use this space to give visitors a brief overview of what this section covers and what they can expect to find below.
Section Header
Section Header
Use this space to give visitors a brief overview of what this section covers and what they can expect to find below.
Product spotlight
Lead with your hero answers, trust, action.
The hero is your first chance to earn trust and a click—use this centered block above the fold on home, pricing, or campaign pages, then align headline, copy, and CTA with search and ads.
For dark product or landing pages: a two-line Aurora headline in one module, a dark CTA, and space below for a full-width screenshot of your product or marketing site.
