12 CSS Code Blocks 01 / 12

Minimalist Dark Mode Code Box

A clean, high-contrast dark code container on a deep navy gradient with a glowing left-accent border, JetBrains Mono type, subtle line numbers, and a muted meta bar carrying a colored language tag.

Best fordocumentation hero blocks, blog post code samples, marketing pages, and any dark-themed dev site that needs a single focal code reference.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="ccb-mdm" aria-label="Minimalist dark mode code box demo">
  <div class="ccb-mdm__card">
    <div class="ccb-mdm__meta">
      <span class="ccb-mdm__dot" aria-hidden="true"></span> session.ts
      <span class="ccb-mdm__lang">TypeScript</span>
    </div>
    <pre class="ccb-mdm__pre"><code><span class="ccb-mdm__ln">1</span><span class="ccb-mdm__c">// resolve an active session token</span>
<span class="ccb-mdm__ln">2</span><span class="ccb-mdm__k">export async function</span> <span class="ccb-mdm__f">getSession</span>(id: <span class="ccb-mdm__k">string</span>) {
<span class="ccb-mdm__ln">3</span>  <span class="ccb-mdm__k">const</span> token = <span class="ccb-mdm__k">await</span> <span class="ccb-mdm__f">cache</span>.<span class="ccb-mdm__f">read</span>(<span class="ccb-mdm__s">`sess:${id}`</span>);
<span class="ccb-mdm__ln">4</span>  <span class="ccb-mdm__k">if</span> (!token) <span class="ccb-mdm__k">return</span> <span class="ccb-mdm__n">null</span>;
<span class="ccb-mdm__ln">5</span>  <span class="ccb-mdm__k">return</span> { id, token, ttl: <span class="ccb-mdm__n">3600</span> };
<span class="ccb-mdm__ln">6</span>}</code></pre>
  </div>
</section>
/* ─── 01 Minimalist Dark Mode Code Box ──────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Sora:wght@400;600;800&display=swap');

.ccb-mdm {
  --ccb-mdm-bg: #0b0f1a;
  --ccb-mdm-panel: #0f172a;
  --ccb-mdm-panel-2: #111a30;
  --ccb-mdm-ink: #e2e8f0;
  --ccb-mdm-muted: #64748b;
  --ccb-mdm-accent: #38bdf8;
  --ccb-mdm-line: rgba(148,163,184,.08);

  width: 100%;
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(700px 400px at 0% 110%, rgba(129,140,248,.08), transparent 55%),
    var(--ccb-mdm-bg);
  color: var(--ccb-mdm-ink);
  font-family: 'Sora', sans-serif;
  padding: 36px 22px;
  box-sizing: border-box;
}
.ccb-mdm *, .ccb-mdm *::before, .ccb-mdm *::after { box-sizing: border-box; }

.ccb-mdm__card {
  position: relative;
  width: 100%; max-width: 620px;
  background: linear-gradient(180deg, var(--ccb-mdm-panel), var(--ccb-mdm-panel-2));
  border: 1px solid var(--ccb-mdm-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
}
.ccb-mdm__card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--ccb-mdm-accent), #818cf8);
  box-shadow: 0 0 24px rgba(56,189,248,.6);
}
.ccb-mdm__meta {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px 12px 24px;
  border-bottom: 1px solid var(--ccb-mdm-line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ccb-mdm-muted);
}
.ccb-mdm__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ccb-mdm-accent);
  box-shadow: 0 0 10px var(--ccb-mdm-accent);
}
.ccb-mdm__lang { margin-left: auto; color: var(--ccb-mdm-accent); font-weight: 700; }
.ccb-mdm__pre {
  margin: 0; padding: 20px 24px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px; line-height: 1.85;
  overflow-x: auto;
  color: #cbd5e1;
}
.ccb-mdm__pre code { display: block; white-space: pre; }
.ccb-mdm__ln  { color: #334155; user-select: none; display: inline-block; width: 2.2em; text-align: right; margin-right: 1.4em; }
.ccb-mdm__k   { color: #c084fc; }
.ccb-mdm__f   { color: #38bdf8; }
.ccb-mdm__s   { color: #34d399; }
.ccb-mdm__c   { color: #475569; font-style: italic; }
.ccb-mdm__n   { color: #fbbf24; }
.ccb-mdm__pre::-webkit-scrollbar       { height: 8px; }
.ccb-mdm__pre::-webkit-scrollbar-thumb { background: rgba(148,163,184,.2); border-radius: 8px; }

More from 12 CSS Code Blocks

Mac-Style Window ContainerCode Container with Line Numbers and Filename HeaderHorizontal Scroll & Word-Wrap Handling (Mobile Responsive)Glow-Effect & Neon Tech Code BlockGlassmorphism Code TerminalInline Code Snippet Pill StylingNeumorphic Embedded Code BoxSplit-Pane Code + Live Preview ContainerMinimalist Light Mode / Editorial ThemeExpandable / Collapsible Code WrapperCode Block with Copy to Clipboard Button
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →