Related Snippets

60 by shared tags
1 / 10
Hero with Floating Glassmorphic Cards

Hero with Floating Glassmorphic Cards

Marquee Footer

Marquee Footer

Hero Email Capture

Hero Email Capture

Logo Cloud

Logo Cloud

App Download Hero

App Download Hero

Word Flip Hero

Word Flip Hero

Learn Coding Visually

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

Startup Hero — Free HTML CSS Landing Snippet

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

TagsSVGText EffectsCSS AnimationCSS OnlyLanding Page

What's included

Features

Full-height dark hero: background #0a0f1e with radial-gradient ambient glow orbs
Animated pulse badge: 7px dot with box-shadow ring and opacity keyframe
Gradient headline: background-clip:text, -webkit-text-fill-color:transparent
Fluid type: clamp(36px,7vw,72px) — responsive with no media query
Primary CTA: indigo fill with drop shadow glow, translateY(-1px) hover lift
Ghost CTA: semi-transparent with border and SVG play icon
Avatar stack: negative margin-left overlap with background-matching border
Social proof user count inline with avatar row
Trusted-by logo strip with muted placeholder wordmarks
Noise texture overlay via inline SVG feTurbulence filter at 3% opacity
Pure HTML and CSS — no JavaScript required

About this UI Snippet

Startup Hero Section — Dark Gradient Background, Gradient Headline, Social Proof & Trusted-By Strip

Screenshot of the Startup Hero snippet rendered live

If you are building a SaaS landing page, startup site, or product launch page and need a complete hero section that converts, this snippet gives you everything: a dark gradient background with ambient glow orbs, an animated beta badge, a large gradient headline, a subtitle, dual CTA buttons, an avatar + user count social proof row, and a trusted-by logo strip — all in plain HTML and CSS with no JavaScript required.

The dark background and ambient glow

The hero uses background: #0a0f1e — a near-black dark navy that makes bright elements pop. Two ::before and ::after pseudo-elements create radial-gradient glow orbs in indigo and pink. The glow is purely decorative and uses pointer-events: none so it never blocks clicks. A subtle noise texture overlay (inline SVG feTurbulence filter) adds micro-texture depth at 3% opacity.

The animated badge

The "Now in public beta" badge uses a pulsing dot: a 7px circle with box-shadow: 0 0 0 3px rgba(99,102,241,0.3) that animates opacity between 1 and 0.5 — communicating live status without being distracting.

The gradient headline

The gradient text uses background: linear-gradient(135deg, #6366f1, #a78bfa, #ec4899) with background-clip: text and -webkit-text-fill-color: transparent. The font-size uses clamp(36px, 7vw, 72px) — fluid from 36px on mobile to 72px on wide screens with no media query.

Social proof row

The overlapping avatar stack uses negative margin-left: -8px on all but the first avatar. Each avatar has a 2px border matching the background colour so the overlap appears clean. The user count ("4,200+ teams") appears next to the avatars as an inline social proof signal.

Trusted-by logo strip

The logo strip uses placeholder company names in a muted colour. Replace these with real company wordmarks as SVG or img elements. The strip communicates enterprise adoption at a glance without requiring full logo assets during development.

Customising this snippet

Change the badge text to match your launch stage. Update the gradient colour stops in .grad to match your brand. Replace the placeholder logos with real company names or SVG wordmarks. Update the user count. Wire the CTA buttons to your sign-up or demo booking flow.

Export and framework compatibility

Click "JSX" to export a React component. Since this snippet uses no JavaScript, it can be a pure Server Component in Next.js App Router — no "use client" directive required. For scroll entry animations, wrap in a Framer Motion motion.section or use the Reveal on Scroll snippet.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't need to work out how this entirely CSS-driven hero layers its depth cues by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the ambient glow orbs use pointer-events none and are built from pseudo-elements rather than extra divs, or how the inline SVG feTurbulence filter produces a noise texture without loading an image file. The same assistant can help optimize it, for example checking whether the inline SVG data URI noise background has any measurable paint cost worth profiling on lower-end devices. It's also useful for extending the feature: ask it to add a subtle parallax tilt on the glow orbs as the cursor moves, wire the Watch Demo button to a real video modal (the FAQ sketches the approach), or convert the fixed placeholder company names into real SVG logo marks with matching opacity treatment. 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 startup hero section using only HTML and CSS, no JavaScript at all.

Requirements:
- A full-height hero with a near-black background, containing two large radial-gradient glow shapes built from pseudo-elements (not extra div elements), positioned so they sit behind all content, are decorative only (pointer-events none so they never intercept clicks), and use different colors and positions to avoid looking perfectly symmetrical.
- A subtle full-bleed noise texture overlay using an inline SVG data URI with a feTurbulence filter (not an external image file), set to a very low opacity so it adds grain without being visually distracting.
- A pill-shaped "status" badge containing a small circular dot that pulses via a CSS keyframe animating opacity, positioned above the main headline.
- A large headline where one phrase is rendered with a gradient fill using the background-clip: text technique (with the necessary vendor-prefixed fallback), sized with a clamp() function so it scales fluidly between a mobile and desktop size with zero media queries.
- Two call-to-action buttons side by side (wrapping to stack on narrow viewports via flex-wrap) — one a solid filled primary button with a hover lift and glow shadow, the other a translucent ghost-style button containing an inline SVG play icon.
- A social proof row showing a stack of small circular avatars overlapping via negative margins (each with a border matching the page background so the overlap reads cleanly) next to a bolded user count.
- A "trusted by" section below the fold-safe content showing a small uppercase label followed by a row of muted placeholder company name text spans that wrap on narrow screens.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

<section class="hero">
  <div class="noise"></div>

  <div class="badge-row">
    <span class="badge">
      <span class="badge-dot"></span>
      Now in public beta
    </span>
  </div>

  <h1 class="headline">
    Ship your product<br>
    <span class="grad">10× faster</span>
  </h1>

  <p class="sub">The all-in-one platform for modern teams. Build, deploy, and scale without the operational complexity — so your team stays focused on what matters.</p>

  <div class="cta-row">
    <a href="#" class="btn-primary">Get started free</a>
    <a href="#" class="btn-ghost">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
      Watch demo
    </a>
  </div>

  <div class="social-proof">
    <div class="avatars">
      <div class="av" style="background:linear-gradient(135deg,#6366f1,#a78bfa)">A</div>
      <div class="av" style="background:linear-gradient(135deg,#ec4899,#f97316)">B</div>
      <div class="av" style="background:linear-gradient(135deg,#10b981,#0ea5e9)">C</div>
      <div class="av" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">D</div>
    </div>
    <span class="proof-text"><strong>4,200+</strong> teams already building</span>
  </div>

  <div class="trusted">
    <span class="trusted-label">Trusted by teams at</span>
    <div class="logos">
      <span class="logo">Acme Corp</span>
      <span class="logo">Orbit</span>
      <span class="logo">Pulse HQ</span>
      <span class="logo">Nexus</span>
      <span class="logo">Vertex</span>
    </div>
  </div>
</section>

Step by step

How to Use

  1. 1
    Update the headline and badge textIn the HTML panel, edit the h1 text and the badge label ("Now in public beta"). The gradient span wraps whichever part of the headline you want highlighted in the gradient colour.
  2. 2
    Change the gradient accent colourIn the CSS panel, find the .grad background gradient and the ambient glow ::before rgba values. Replace #6366f1 and #ec4899 with your brand colours throughout.
  3. 3
    Update the social proof numbersChange "4,200+ teams already building" to your real user or customer count. Update avatar initials and gradients to match your team or customer avatars.
  4. 4
    Replace the trusted-by logosReplace the .logo text spans with real company names or SVG wordmarks. Size them consistently at 14–16px and use a muted colour (rgba(255,255,255,0.3)) for brand-appropriate opacity.
  5. 5
    Wire the CTA buttonsSet href="#" on .btn-primary to your sign-up URL and .btn-ghost to your demo or video URL. Both handle hover states and the primary button has a drop shadow glow.
  6. 6
    Export in your formatClick "HTML" for a standalone file ready to paste into any page, "JSX" for a React component, or "Tailwind" for a React + Tailwind CSS version with utility classes.

Real-world uses

Common Use Cases

SaaS and startup product landing page hero
The dark gradient, bold gradient headline, and social proof row are the standard conversion-optimised pattern for SaaS landing pages. Drop above your features section for an above-the-fold hero that immediately communicates value and credibility.
Product launch and beta announcement pages
The pulsing "Now in public beta" badge signals live availability. Change it to "Coming soon", "Now live", or "Early access" for different launch stages. The badge draws the eye before the headline and sets context for the page.
Investor pitch sites and demo day landing pages
The trusted-by logo strip and user count social proof row communicate traction to investors and evaluators. Replace logos with investor names or partner organisations. The dark aesthetic signals technical sophistication.
Developer tool and API product homepages
Dark themes are the standard for developer tool landing pages — they signal technical credibility to a developer audience. The hero pairs directly with a code preview section (see Split Hero) below.
Mobile app and platform launch pages
Adapt the hero for a mobile app launch: replace the text CTAs with App Store and Play Store badge links (see App Hero snippet). The social proof row becomes app ratings and download count.
Study dark hero CSS techniques without a framework
The ambient glow uses layered ::before and ::after pseudo-elements with radial-gradient — no image files. The noise texture uses an inline SVG data URI. The gradient text uses background-clip: text. Each technique is isolated and can be applied independently.
Related: Split-Screen Hero with Embedded Signup Form
See the Split-Screen Hero with Embedded Signup Form for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The .grad span has background: linear-gradient(135deg, #6366f1, #a78bfa, #ec4899). Then -webkit-background-clip: text clips the background to the text shape, and -webkit-text-fill-color: transparent makes the text fill itself transparent so the background gradient shows through. The standard background-clip: text property is also set for non-WebKit browsers. Both properties are required — the effect does not work if either is missing.

For an inline video modal: add a data-video="YOUR_YOUTUBE_ID" attribute to .btn-ghost. In JavaScript, listen for the click event and create a modal overlay with an iframe: const iframe = document.createElement("iframe"); iframe.src = "https://www.youtube.com/embed/" + btn.dataset.video + "?autoplay=1"; . See the Modal snippet in this library for the full dismiss pattern with ESC and click-outside close.

The hero already uses clamp() for fluid font sizing and flex-wrap: wrap on the CTA row so buttons stack vertically on narrow screens. For the logo strip on very narrow screens, add @media (max-width: 480px) { .logos { gap: 12px; } .logo { font-size: 12px; } }. The padding: 60px 24px on .hero provides sufficient breathing room on mobile without a media query.

Yes. Click "JSX" to download a React component. Since this snippet has no JavaScript, the JSX export is purely structural — no useState or useEffect needed. In Next.js App Router, use it as a server component (no "use client" directive required). For animations on scroll entry, wrap the hero in a motion.section from Framer Motion or use the Reveal on Scroll snippet from the Animations category.