31 CSS Hero Sections05 / 31

Pure CSSMIT licensed

Terminal Dev Hero

Vintage-CRT terminal hero — phosphor green text + amber prompt on a warm beige paper backdrop. The 1970s computing aesthetic for a modern dev tool.

Published

Live Demo
Try it

The code

<section class="hs-05" aria-label="Hero">
  <div class="hs-05__copy">
    <h2>Ship from <em>your terminal.</em></h2>
    <p>
      One command. No dashboard. No yak shave. Your CI agrees with your local because they share an
      OS.
    </p>
    <a class="hs-05__cta" href="#install">Read the docs →</a>
  </div>
  <div class="hs-05__screen" aria-hidden="true">
    <div class="hs-05__line">
      <span class="hs-05__prompt">$</span> swift install <span class="hs-05__cursor"></span>
    </div>
    <div class="hs-05__line hs-05__out">→ resolving dependencies</div>
    <div class="hs-05__line hs-05__out">→ compiling 47 modules</div>
    <div class="hs-05__line hs-05__out">→ linking binary</div>
    <div class="hs-05__line hs-05__ok">✓ shipped in 2.3s</div>
    <div class="hs-05__line"><span class="hs-05__prompt">$</span> _</div>
  </div>
</section>
.hs-05 {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(50,30,10,0.04) 31px 32px), #f0e4cf;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2a1d0a;
  box-sizing: border-box;
}

.hs-05 h2 {
  margin: 0 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.hs-05 h2 em {
  color: #b8580c;
  font-style: normal;
}

.hs-05 h2 em::before {
  content: '> ';
  opacity: 0.6;
}

.hs-05 p {
  margin: 0 0 24px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #5a4220;
  max-width: 440px;
}

.hs-05__cta {
  display: inline-block;
  padding: 12px 22px;
  background: #2a1d0a;
  color: #f0e4cf;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.15s;
}

.hs-05__cta:hover {
  background: #b8580c;
}

.hs-05__screen {
  background: #0d1908;
  border: 2px solid #2a1d0a;
  border-radius: 8px;
  padding: 22px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  line-height: 1.85;
  box-shadow: 0 0 0 8px rgba(13,25,8,0.1), 0 0 60px rgba(60,255,120,0.18) inset;
}

.hs-05__line {
  color: #5fff8c;
  text-shadow: 0 0 8px rgba(95,255,140,0.5);
}

.hs-05__prompt {
  color: #ffb348;
  text-shadow: 0 0 8px rgba(255,179,72,0.5);
  margin-right: 6px;
}

.hs-05__out {
  color: #88a890;
  opacity: 0.9;
  padding-left: 14px;
}

.hs-05__ok {
  color: #5fff8c;
  padding-left: 14px;
  font-weight: 700;
}

.hs-05__cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: #5fff8c;
  vertical-align: text-bottom;
  animation: hs-05-blink 1s steps(2) infinite;
}

@keyframes hs-05-blink {
  to {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .hs-05 {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-05__cursor {
    animation: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Hero Section from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Terminal Dev Hero
Source: https://codefronts.com/layouts/css-hero-sections/terminal-dev-hero/

Vintage-CRT terminal hero — phosphor green text + amber prompt on a warm beige paper backdrop. The 1970s computing aesthetic for a modern dev tool.
## HTML
```html
<section class="hs-05" aria-label="Hero">
  <div class="hs-05__copy">
    <h2>Ship from <em>your terminal.</em></h2>
    <p>
      One command. No dashboard. No yak shave. Your CI agrees with your local because they share an
      OS.
    </p>
    <a class="hs-05__cta" href="#install">Read the docs →</a>
  </div>
  <div class="hs-05__screen" aria-hidden="true">
    <div class="hs-05__line">
      <span class="hs-05__prompt">$</span> swift install <span class="hs-05__cursor"></span>
    </div>
    <div class="hs-05__line hs-05__out">→ resolving dependencies</div>
    <div class="hs-05__line hs-05__out">→ compiling 47 modules</div>
    <div class="hs-05__line hs-05__out">→ linking binary</div>
    <div class="hs-05__line hs-05__ok">✓ shipped in 2.3s</div>
    <div class="hs-05__line"><span class="hs-05__prompt">$</span> _</div>
  </div>
</section>
```
## CSS
```css
.hs-05 {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(50,30,10,0.04) 31px 32px), #f0e4cf;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2a1d0a;
  box-sizing: border-box;
}

.hs-05 h2 {
  margin: 0 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.hs-05 h2 em {
  color: #b8580c;
  font-style: normal;
}

.hs-05 h2 em::before {
  content: '> ';
  opacity: 0.6;
}

.hs-05 p {
  margin: 0 0 24px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #5a4220;
  max-width: 440px;
}

.hs-05__cta {
  display: inline-block;
  padding: 12px 22px;
  background: #2a1d0a;
  color: #f0e4cf;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.15s;
}

.hs-05__cta:hover {
  background: #b8580c;
}

.hs-05__screen {
  background: #0d1908;
  border: 2px solid #2a1d0a;
  border-radius: 8px;
  padding: 22px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  line-height: 1.85;
  box-shadow: 0 0 0 8px rgba(13,25,8,0.1), 0 0 60px rgba(60,255,120,0.18) inset;
}

.hs-05__line {
  color: #5fff8c;
  text-shadow: 0 0 8px rgba(95,255,140,0.5);
}

.hs-05__prompt {
  color: #ffb348;
  text-shadow: 0 0 8px rgba(255,179,72,0.5);
  margin-right: 6px;
}

.hs-05__out {
  color: #88a890;
  opacity: 0.9;
  padding-left: 14px;
}

.hs-05__ok {
  color: #5fff8c;
  padding-left: 14px;
  font-weight: 700;
}

.hs-05__cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: #5fff8c;
  vertical-align: text-bottom;
  animation: hs-05-blink 1s steps(2) infinite;
}

@keyframes hs-05-blink {
  to {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .hs-05 {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-05__cursor {
    animation: none;
  }
}
```

How this works

The hero is a two-column CSS Grid (grid-template-columns: 1fr 1.05fr) — copy left, vintage-CRT terminal right — collapsing to a single column under 720px. The whole section sits on a warm beige paper backdrop (#f0e4cf) with a repeating-linear-gradient that paints a 32px horizontal line every row at 4% opacity: the ghost of legal-pad ruling, the 1970s computing paper aesthetic. The terminal itself is a self-contained <div> with deep phosphor-green background (#0d1908), a 2px dark-brown border, and an inset box-shadow: 0 0 60px rgba(60,255,120,0.18) inset that simulates CRT phosphor bloom without a real filter pass — the shadow is faked bloom, and it looks correct.

The palette is workshop-computer: phosphor green (#5fff8c) as the primary terminal text, amber (#ffb348) for the prompt character — the classic amber/green terminal dichotomy from real 1980s CRT monitors — muted teal-green (#88a890) for the output lines to create hierarchy inside the terminal, and warm beige (#f0e4cf) with dark espresso (#2a1d0a) for the paper backdrop. Every terminal-line text-shadow (0 0 8px rgba(95,255,140,0.5)) is the phosphor glow — subtle enough to not blur the type, strong enough to feel radiant. The blinking cursor uses animation: hs-05-blink 1s steps(2) infinite — the steps(2) timing function is what makes it a hard on/off blink instead of a soft fade, matching real terminal cursor behavior.

Why it converts: developer-tool buyers — DevOps, observability, edge platforms, CI/CD — have seen the same 12 SaaS heroes for a decade, and they trust brands that look like the tools they already use. Vercel, Netlify, Sentry, Grafana, Fly, and Railway all lean on terminal aesthetics for the same reason: it says "we built this for you, not for your VP." The visible $ swift install command with a real "shipped in 2.3s" completion line is a proof artifact — the visitor sees the exact experience they'd have in 10 seconds, which is the entire developer-hero conversion funnel condensed into eight lines of ASCII.

Make it yours

  • Recolor to your terminal brand: phosphor green (#5fff8c) is Vercel/Netlify green; shift to #00d4ff for cyan (Fly.io), #ff5f5f for red (Sentry), or #c084fc for purple (Grafana Cloud). Keep the amber prompt (#ffb348) — it's the readable-contrast character that separates prompts from output, regardless of theme.
  • Swap the type: JetBrains Mono is the developer-hero default and it's what this demo uses everywhere. For a slightly warmer terminal try 'IBM Plex Mono'. For a modernist DevOps hero use 'Berkeley Mono' or 'Commit Mono'. Never swap to a proportional font — the terminal illusion breaks the moment characters aren't monospaced.
  • Change the CTA shape: border-radius: 0 square-cornered is peak developer-tool authentic. Bump to border-radius: 4px for softened modernist (Vercel-adjacent). For a Linear-style dev hero, shift the CTA background to the phosphor green and text to deep terminal green (#0d1908) — the terminal-color CTA is a strong signal that the button is the product.
  • For dark mode: the terminal is already dark. Invert the paper backdrop by shifting #f0e4cf to #1a1510, text from #2a1d0a to #f0e4cf, and drop the repeating-linear-gradient scanline opacity to rgba(240,228,207,0.04). The terminal stays exactly as-is — its dark background reads correctly against both paper modes.
  • For Tailwind: grid grid-cols-[1fr_1.05fr] gap-14 bg-[#f0e4cf] font-mono on section, bg-[#0d1908] border-2 border-[#2a1d0a] rounded-lg shadow-[0_0_60px_rgba(60,255,120,0.18)_inset] on the terminal, text-[#5fff8c] [text-shadow:0_0_8px_rgba(95,255,140,0.5)] on the lines, bg-[#2a1d0a] text-[#f0e4cf] font-mono font-bold hover:bg-[#b8580c] on the CTA.

Gotchas — read before shipping

  • The animation: hs-05-blink 1s steps(2) infinite on the cursor is intentionally hard-blink — do NOT swap steps(2) for a smooth ease; the smooth version looks like a broken cursor to developers who have spent 10,000 hours staring at real terminals. The prefers-reduced-motion guard disables blinking entirely, required for WCAG 2.3.3 and vestibular safety.
  • The text-shadow: 0 0 8px rgba(95,255,140,0.5) phosphor glow on every terminal line is the whole aesthetic — but text-shadow is a paint-heavy operation. On terminal lines longer than ~80 characters, the glow can bloat paint times and hurt INP. Keep terminal copy short (this demo caps at 25 chars per line for a reason) or drop the shadow blur radius to 4px.
  • Phosphor green (#5fff8c) on deep terminal green (#0d1908) computes to a contrast ratio of ~13:1 — safely WCAG AAA for a developer hero. But the muted output color #88a890 on the same background is ~4.9:1, which passes AA for regular text (14px+) but is close to the failure edge. Never drop the output text below 14px or contrast fails; the demo uses 14px exactly.
  • The repeating-linear-gradient ruled-paper backdrop is cheap to paint but if you nest this hero inside a scrolling parent with backdrop-filter or transform, the gradient can shimmer/moire on subpixel scroll. If you see the shimmer, add transform: translateZ(0) to the section to promote it to its own compositor layer.
  • JetBrains Mono needs to load before the hero paints or you get a font-swap FOUT that shifts every terminal line — a CLS hit visible in Core Web Vitals. Use <link rel="preload" as="font" href="..." crossorigin> for the monospace file, or self-host with font-display: optional so if it doesn't load in time, the fallback stays and no shift happens.
  • In Next.js or Remix, the terminal's inset box-shadow can render slightly differently between SSR HTML and the hydrated version if you're using Tailwind arbitrary values — Tailwind's JIT sometimes rounds the alpha channel differently between build and runtime. Ship the terminal shadow as a plain CSS class, not an arbitrary value, if you see a hydration mismatch warning.

Techniques used in this demo

grid-templateMDN ↗@keyframesMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →