Centred Gradient Hero

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

44 sectionsView all →
1–6 of 44
Centred Gradient Hero template preview
Hero

Centred Gradient Hero

Responsive · Animated
SaaS Split Hero template preview
Hero

SaaS Split Hero

Responsive · Animated
Image Background Hero template preview
Hero

Image Background Hero

Responsive · Animated
App Product Hero template preview
Hero

App Product Hero

Responsive · Animated
Personal Portfolio Hero template preview
Hero

Personal Portfolio Hero

Responsive · Animated
Icon Grid Features template preview
Features

Icon Grid Features

Responsive · Animated

Centred Gradient Hero — Free Website Section Template

Hero · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryHero
Tagsherocenteredgradientdarksaaslanding pagescreenshot
Updated October 20, 2026

What's included

Features

Centred headline, eyebrow pill, supporting text and two buttons
Glowing background built from layered CSS radial gradients
Wide product screenshot rising from the bottom edge, switchable
Reassurance note under the buttons for trial or pricing terms
Dark Midnight theme by default; any preset or exact colours
Container-query responsive with no fixed breakpoints to manage
GSAP + ScrollTrigger entrance animation with speed control
Upload your own screenshot or paste a hosted image URL
Shared theme tokens as CSS custom properties
Export HTML, a ZIP with images, React or Vue, or fork to My Code

About this section

Centred Gradient Hero — Free Dark Hero Section Template With Glow

Centred Gradient Hero is a free, dark landing-page hero with soft glowing gradients drawn entirely in CSS. A small pill eyebrow, a large centred headline, supporting text, two buttons and a short reassurance note sit above a wide product screenshot that rises from the bottom edge of the section, the layout made popular by modern developer tools and AI products.

Glow without images

The background is three layered radial gradients (your brand colour at the top, with pink and cyan accents on the sides), so it looks rich without loading a background image and recolours instantly when you change the brand colour. The screenshot frame picks up a matching glow along its top edge.

Built to convert

Centred heroes put all attention on one message and one action. The note under the buttons ("Free forever for small teams · Set up in 2 minutes") answers the two most common sign-up objections, and the screenshot gives visitors a reason to keep scrolling. Turn the screenshot off for a compact text-only hero; the section adds bottom padding automatically.

Theme, motion and exports

Pick a theme preset (the Midnight look is the default) or set exact colours, choose fonts from Google Fonts or upload your own, and set the corner radius and content width shared by every section. The GSAP entrance animation staggers the text and fades the screenshot up once on scroll, with reduced-motion support. Export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Centred Gradient Hero: A centred, dark landing page hero with soft glowing gradients drawn in CSS: a small eyebrow, a large headline, supporting text, two buttons, a reassurance note and an optional wide product screenshot that rises from the bottom of the section.

Why use it

Why Use the Centred Gradient Hero

◎
One message, one action
A centred layout removes distractions, so visitors read the promise and see the main button straight away.
✦
Rich look, no heavy images
CSS gradients create the glow, keeping the section fast to load and easy to recolour with your brand.
▭
Screenshot that pulls you down
The product image rising from the bottom edge invites visitors to scroll into the rest of the page.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the headline & text, buttons and product image in the panel. Switch the product image on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🤖
AI and developer tool launches
Lead with a bold promise on a dark gradient, a "Get started free" button and a screenshot of the app, the style visitors expect from modern tech products.
🧪
Public beta announcement
Use the eyebrow for "Now in public beta", the note for "Free during beta" and the secondary button to link to a short product tour.
📄
Text-only hero for inner pages
Switch the screenshot off for a compact centred hero on pricing, about or documentation pages that still matches your homepage.
🎨
Portfolio of a product designer
Show a case-study screenshot under a centred headline about the project, with buttons for the live site and the full case study.

Got questions?

Frequently Asked Questions

With three layered CSS radial gradients behind the content: one in your brand colour at the top and two accent glows on the sides. No background image is loaded, and the glow recolours when you change the brand colour.

Yes. Switch off "Product image" and the hero becomes a compact centred text section, with extra bottom padding added automatically.

Yes. Pick a light preset such as Indigo or Mono, or set the background and text colours yourself. The glow uses your brand colour, so it suits light and dark themes.

Open Export and choose Copy React component or Copy Vue component. The CSS, including the theme variables and the Google Fonts import, comes with the component, and the GSAP animation is included.

Yes. All section templates are free for personal and commercial websites, with no account and no attribution required.

It saves an editable copy of your Centred Gradient Hero in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.