12 CSS Code Blocks 09 / 12

Neumorphic Embedded Code Box

A soft-UI card on a matched gray canvas where the code box uses dual <code>box-shadow: inset</code> (one light highlight, one dark shadow) to look recessed into the surface, with a raised outer card and a pressed-in icon badge for the tactile look.

Best fordesign-tool dashboards, settings panels embedded inside documentation, calm productivity apps, and any place a code reference needs to feel like part of the surrounding UI rather than a hard rectangle dropped on top.

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

The code

<section class="ccb-nmp" aria-label="Neumorphic embedded code box demo">
  <div class="ccb-nmp__card">
    <div class="ccb-nmp__row">
      <div class="ccb-nmp__badge" aria-hidden="true">{ }</div>
      <div>
        <div class="ccb-nmp__title">useToggle</div>
        <div class="ccb-nmp__sub">hooks/useToggle.js</div>
      </div>
    </div>
    <div class="ccb-nmp__embed">
      <pre class="ccb-nmp__pre"><code><span class="ccb-nmp__c">// soft, tactile state hook</span>
<span class="ccb-nmp__k">export const</span> <span class="ccb-nmp__f">useToggle</span> = (init = <span class="ccb-nmp__s">false</span>) =&gt; {
  <span class="ccb-nmp__k">const</span> [on, set] = <span class="ccb-nmp__f">useState</span>(init);
  <span class="ccb-nmp__k">return</span> [on, () =&gt; <span class="ccb-nmp__f">set</span>(v =&gt; !v)];
};</code></pre>
    </div>
  </div>
</section>
/* ─── 09 Neumorphic Embedded Code Box ──────── */
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;600&family=Quicksand:wght@400;500;700&display=swap');

.ccb-nmp {
  --ccb-nmp-bg: #e4e8ef;
  --ccb-nmp-ink: #56627a;
  --ccb-nmp-muted: #9aa3b6;
  --ccb-nmp-accent: #7b8cde;
  --ccb-nmp-light: #ffffff;
  --ccb-nmp-dark: #bcc4d4;

  width: 100%;
  min-height: 320px;
  background: var(--ccb-nmp-bg);
  color: var(--ccb-nmp-ink);
  font-family: 'Quicksand', sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 36px 24px;
  box-sizing: border-box;
}
.ccb-nmp *, .ccb-nmp *::before, .ccb-nmp *::after { box-sizing: border-box; }

.ccb-nmp__card {
  width: 100%; max-width: 560px;
  background: var(--ccb-nmp-bg);
  border-radius: 28px;
  padding: 26px;
  box-shadow:
    -10px -10px 24px var(--ccb-nmp-light),
     12px 12px 28px var(--ccb-nmp-dark);
}
.ccb-nmp__row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.ccb-nmp__badge {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--ccb-nmp-bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 3px 3px 7px var(--ccb-nmp-dark),
    inset -3px -3px 7px var(--ccb-nmp-light);
  color: var(--ccb-nmp-accent);
  font-weight: 700; font-family: 'Azeret Mono', monospace;
}
.ccb-nmp__title { font-weight: 700; font-size: 15px; }
.ccb-nmp__sub   { font-size: 12.5px; color: var(--ccb-nmp-muted); font-family: 'Azeret Mono', monospace; }

.ccb-nmp__embed {
  background: var(--ccb-nmp-bg);
  border-radius: 18px;
  box-shadow:
    inset 6px 6px 14px var(--ccb-nmp-dark),
    inset -6px -6px 14px var(--ccb-nmp-light);
  padding: 20px 22px;
}
.ccb-nmp__pre {
  margin: 0;
  font-family: 'Azeret Mono', monospace;
  font-size: 13px; line-height: 1.9;
  color: #5b6680; overflow-x: auto;
}
.ccb-nmp__k { color: #8c6fd6; }
.ccb-nmp__f { color: #5a8ad6; }
.ccb-nmp__s { color: #5aa07a; }
.ccb-nmp__c { color: #a7afc0; font-style: italic; }
.ccb-nmp__pre::-webkit-scrollbar       { height: 7px; }
.ccb-nmp__pre::-webkit-scrollbar-thumb { background: var(--ccb-nmp-dark); border-radius: 7px; }

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 StylingSplit-Pane Code + Live Preview ContainerMinimalist Light Mode / Editorial ThemeExpandable / Collapsible Code WrapperCode Block with Copy to Clipboard ButtonMinimalist Dark Mode Code Box
View the full collection →

Search CodeFronts

Loading…

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