webdevpuneet.com

Related Snippets

63 in Heroes category
1–6 of 60

Swiper Parallax Hero Slides

ScrollReveal Hero Text Reset

Bootstrap Split Hero with Inline Signup Form

Bootstrap Video Hero with Play Overlay

Bootstrap Hero Section with Gradient Background

Launch Countdown Clock

Hero Section — Free HTML CSS Dark Landing Snippet

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

CategoryHeroes
TagsSVGCSS OnlyLanding Page

Copy & paste

Source Code

<section class="hero">
  <div class="badge">New → v2.0 just shipped</div>
  <h1>Build faster,<br>ship with confidence</h1>
  <p>The modern toolkit for frontend developers. Zero config, instant preview, works everywhere.</p>
  <div class="ctas">
    <a href="#" class="btn solid">Get started free</a>
    <a href="#" class="btn ghost">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
      Watch demo
    </a>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

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.

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.
Related: Resizable Split Pane
See the Resizable Split Pane for a related layouts pattern worth pairing with this one.

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.