Section

Gradient Hero

Bold gradient-text hero on a spinning conic backdrop.

Section
Vanilla
HTML
MIT

Preview

Live section

Preview not available

No interactive preview for this section.

Install it with the CLI below, or read the implementation on this page.

No dependencies Light/dark · Focus-visible · Reduced-motion

Install

Add to your project

terminal

npx devsnips add Vanilla/Sections/Hero/hero-gradient

registry path: Vanilla/Sections/Hero/hero-gradient

Source

Implementation

code.html

<!-- Snippet Name: Gradient Hero | Family: Hero | Description: Bold gradient-text hero on a spinning conic backdrop. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gradient Hero | DevSnips</title>
  <meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: hero-gradient. Copy, customize, ship.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  <style>  /* ---- Neo-Brutalist design tokens ---- */
  :root{
    --bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
    --border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
    --accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
    --radius:6px; --radius-lg:10px;
    --shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
    --ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
    --container:1200px; --gutter:20px;
    --fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
    --fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
    --ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  }
  @media (prefers-color-scheme:dark){
    :root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
      --border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
  }
  /* ---- base layout + components ---- */
  *{box-sizing:border-box}
  .nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
    line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
  .nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
  .nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
  .nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
  .nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
  .nb p{margin:0} .nb a{color:inherit}
  .nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
    font-weight:700;text-transform:uppercase;letter-spacing:.14em;
    border:2px solid var(--border);background:var(--surface);padding:6px 12px;
    border-radius:999px;box-shadow:var(--shadow)}
  .nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
  .nb .muted{color:var(--muted)}
  .nb .center{text-align:center;margin-inline:auto}
  .nb .grid{display:grid;gap:var(--gutter)}
  .nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
    text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
    padding:14px 22px;background:var(--primary);color:var(--primary-fg);
    box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
  .nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
  .nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
  .nb .btn.outline{background:var(--surface);color:var(--foreground)}
  .nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
  .nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
  .nb .btn.accent{background:var(--accent);color:#0a0a0a}
  .nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
  .nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
  .nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
    padding:4px 10px;border-radius:999px;background:var(--surface)}
  .nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
  .nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
    padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
  .nb .skip:focus{left:8px}
  .nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
  @media (prefers-reduced-motion:reduce){
    .nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
      transition-duration:.001ms!important;animation-iteration-count:1!important}
  }

  .hg{position:relative;overflow:hidden}
  .hg .container{position:relative;z-index:2;text-align:center}
  .hg h1{margin:18px 0;background:linear-gradient(90deg,var(--primary),var(--pink),var(--accent));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .hg .lead{margin:0 auto 30px}.hg .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .hg .bg{position:absolute;inset:-30% -10% auto -10%;height:540px;z-index:1;opacity:.5;
    background:conic-gradient(from 90deg at 50% 50%,var(--primary),var(--pink),var(--accent),var(--cyan),var(--primary));
    filter:blur(60px);animation:hgspin 18s linear infinite}
  @keyframes hgspin{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){.hg .bg{animation:none}}</style>
</head>
<body class="nb">
  <a class="skip" href="#main">Skip to content</a>

  <section class="hg" aria-labelledby="hg-title">
    <div class="bg" aria-hidden="true"></div>
    <div class="container">
      <span class="eyebrow"><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M12 2v6M12 16v6M2 12h6M16 12h6M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3'/></svg> Gradient</span>
      <h1 id="hg-title">Build the brand<br>people remember.</h1>
      <p class="lead">Bold, colorful, unmistakable. A hero that turns first impressions into clicks.</p>
      <div class="cta">
        <a class="btn" href="#">Get the kit</a>
        <a class="btn outline" href="#">Browse templates</a>
      </div>
    </div>
  </section>
</body>
</html>

# Gradient Hero

Bold gradient-text hero on a spinning conic backdrop.

**Technology:** Vanilla HTML/CSS/JS  
**Category:** sections / hero  
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)  
**Responsive:** Mobile-first (320px → 1920px)  
**Dark mode:** via `prefers-color-scheme`  

**Tags:** hero, gradient, colorful, animated  
**Features:** light/dark, reduced-motion safe, gradient text

## Usage

1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand.

101 lines UTF-8 · LF · Spaces: 2

AI-ready

Available to your agent.

This section is reachable through the DevSnips CLI, MCP server and Skills integrations — one registry, one resource path.

Resource path

devsnips://sections/hero/hero-gradient

Continue browsing

View all

Live section

Add to your project

Implementation

Available to your agent.

Related sections