More Layouts Snippets

See all ->

Responsive Card Grid

Bento Grid

Split Hero

Vertical Timeline

Front-End Coding Playgrounds

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Hero Section — Free HTML CSS Dark Landing Snippet

Hero Section · Layouts · Plain HTML & CSS · Live preview

Share & Support

What's included

Features

Dark hero with radial-gradient ellipse glow at top-centre — pure CSS, no image
Announcement badge with semi-transparent rgba background and border
Headline with clamp() font-size for fluid scaling between mobile and desktop
Subtext with max-width and opacity for visual hierarchy
Dual CTA: solid primary button + ghost button with white outline
Full-height hero with min-height: 100vh and flex centre alignment
Pure HTML and CSS — no JavaScript required
Export as HTML file, React JSX, or React + Tailwind CSS
Mobile (375px), Tablet (768px), Desktop device preview buttons
Live split-pane editor — preview updates as you type

About this UI Snippet

Hero Section — Dark Gradient Background, Badge & Dual CTA Buttons in HTML CSS

Screenshot of the Hero Section snippet rendered live

The hero section is the most-read part of any landing page. It is the first thing visitors see and typically determines whether they scroll further or leave. A well-structured hero answers three questions immediately: what is this, who is it for, and what should I do next. This snippet gives you a production-ready hero layout with a dark gradient background, a small announcement badge, a headline, subtext, and two call-to-action buttons — for a more elaborate version with social proof, see the startup hero.

The radial gradient background

The hero uses background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.2) 0%, transparent 65%) on a dark #0f172a base. This places a soft indigo glow at the top-centre of the section — a light source effect that draws the eye to the headline without using an image. The glow fades to transparent at 65%, leaving the edges dark and uncluttered. To change the glow colour, update the rgba value. To move the glow, change 50% 0% to a different position — 0% 50% for a left-edge glow, 100% 50% for a right-edge glow.

The announcement badge

The badge (.badge) is a small pill above the headline with a semi-transparent background and a subtle border: background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3). It draws attention to a recent update or key message without competing with the headline. Common uses: "New → v2.0 just shipped", "Now in beta", "Free forever". To make the badge a link, wrap its contents in an <a> tag.

The dual CTA pattern

Two buttons side by side communicate a clear primary and secondary action. The primary button (.cta.primary) is solid-filled. The secondary/ghost button (.cta.ghost) has a transparent background with a white outline. The visual contrast directs users to the primary action while still offering the secondary option. A common split: "Get started free" (primary) and "View demo" or "Learn more" (ghost).

Typography and spacing

The headline uses font-size: clamp() so it scales fluidly between mobile and desktop without a media query. The subtext has max-width: 480px and opacity: 0.7 to create visual hierarchy — it is important but secondary. All elements are centred with align-items: center; text-align: center on the flex container.

Adapting to a light background

To use this hero on a light background, change background: #0f172a to white or light grey, remove the radial gradient overlay, change text colours from white to dark, and update the badge colours to match your brand — or start from the white-by-default minimal hero. The layout structure remains identical.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to guess at the gradient math yourself. Paste this snippet's HTML and CSS into an AI coding assistant like Claude and ask it to explain exactly how the radial-gradient's position and fade percentage combine with the dark body background to create the top-centre glow, or why the headline uses clamp() instead of a media query for its font size. The same assistant is useful for optimizing it — ask whether the gradient background should be isolated on its own layer with will-change if it will sit behind animated content, and whether the ghost button's border and background values give enough contrast on very light ambient displays. It's just as useful for extending the hero: ask it to add a subtle entrance animation for the headline and buttons on load, generate a light-theme variant with the colors inverted, or add a small video or screenshot panel beneath the CTAs. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a dark SaaS landing-page hero section in plain HTML and CSS only — no JavaScript, no image assets, no framework.

Requirements:
- A full-viewport-height section, centered both vertically and horizontally, with a dark background and a soft radial-gradient glow positioned at the top-center that fades to fully transparent partway down the section, created purely with CSS background properties (no image).
- A small pill-shaped announcement badge above the headline with a translucent tinted background and matching translucent border.
- A large headline whose font-size uses the CSS clamp() function (not a media query) so it scales fluidly between a minimum and maximum size across viewport widths, with tight letter-spacing and line-height suited to a bold display headline.
- A subtext paragraph below the headline with a constrained max-width so it doesn't stretch edge to edge on wide screens, and a muted color distinct from the headline.
- Two call-to-action buttons side by side that wrap onto their own line on narrow viewports: one solid filled button as the primary action, and one "ghost" button with a translucent background, a subtle border, and an inline SVG icon before its label.
- Ensure the whole thing works with zero JavaScript and remains a single self-contained section that could be pasted into any existing page.

Step by step

How to Use

  1. 1
    Load the snippetClick "Hero Section" in the sidebar. The preview shows the full dark hero with gradient glow, badge, headline, and CTA buttons.
  2. 2
    Update the headline and subtextIn the HTML panel, replace "Build faster, ship with confidence" and the subtext paragraph with your product value proposition.
  3. 3
    Update the badge and CTA labelsChange the badge text to your latest announcement. Update the button labels to match your primary and secondary actions.
  4. 4
    Change the accent colourFind #6366f1 in the CSS and replace with your brand colour. Updates the glow, badge tint, and primary button together.
  5. 5
    Test on mobileSwitch to the 375px preview. The headline uses clamp() so it scales automatically. Check the button row wraps cleanly on small screens.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

SaaS and product landing pages
Drop the hero into any product landing page. Replace the headline, subtext, badge, and CTA labels with your value proposition and the layout is ready.
Portfolio and personal sites
Use the dark hero as an above-the-fold section for a developer or designer portfolio. Update the badge to a role title and the CTAs to "View work" and "Contact me".
Learn radial-gradient and clamp()
Edit the radial-gradient position and opacity in the CSS panel. Update the clamp() values to see how fluid typography scales between the min and max sizes.
Prototype landing page layouts
Use the hero as the starting point for a landing page wireframe. Test the headline hierarchy, CTA placement, and mobile layout at all three device widths before committing to a framework.
Drop into any HTML or CMS template
The hero is a self-contained section element. Paste it at the top of any HTML file, WordPress template, or static site generator layout — it works immediately.
A/B test headline and CTA combinations
The clean HTML structure makes it easy to swap headlines, subtext, and CTA labels for conversion testing. Save each variant under a custom name in the Saved tab.

Got questions?

Frequently Asked Questions

The .hero has background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.2) 0%, transparent 65%) layered over the dark #0f172a body background. The ellipse starts at the top centre (50% 0%) with a soft indigo tint at 20% opacity and fades to transparent at 65%. Change the rgba colour to change the glow hue, or move the start position to reposition the light source.

The headline uses font-size: clamp(min, preferred, max). clamp() picks the preferred value (usually a viewport-relative unit like 5vw) but clamps it between a minimum and maximum. This scales fluidly between screen sizes without a media query breakpoint.

Add an img or a div with a background-image below the .cta-row in the HTML. Set max-width: 100% and a reasonable max-height on the image. For a split hero layout with text on the left and an image on the right, see the Split Hero snippet in this library.

Change body background to white or #f8fafc. Change .hero background to a light radial gradient or remove it. Update all text colours from white to dark — typically #1e293b for headings and #475569 for subtext. Adjust the badge colours to use a light tint of your brand colour.

Yes. Add a <video autoplay muted loop playsinline> element inside .hero with position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0. Give .hero position: relative and add z-index: 1 to its content wrapper. The radial gradient overlay on .hero acts as a tint over the video.

Yes. Click "JSX" to download a React component or "Tailwind" for a Tailwind CSS version. In Next.js, replace the <section> with a component and pass the headline, subtext, badge, and CTA text as props for easy reuse across pages.