12 CSS Code Blocks 02 / 12

Mac-Style Window Container

A floating macOS-style window with the canonical red / yellow / green traffic-light controls and a filename in the title bar, sitting on a soft pastel gradient with a 3D tilt that straightens on hover.

Best forproduct hero sections, landing-page demos, slide thumbnails, and any place a code sample needs to feel like a real app surface instead of a flat block.

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

The code

<section class="ccb-mac" aria-label="Mac-style window code block demo">
  <div class="ccb-mac__scene">
    <div class="ccb-mac__window">
      <div class="ccb-mac__titlebar">
        <div class="ccb-mac__traffic" aria-hidden="true">
          <span class="ccb-mac__red"></span>
          <span class="ccb-mac__yellow"></span>
          <span class="ccb-mac__green"></span>
        </div>
        <div class="ccb-mac__filename">App.jsx — codefronts</div>
      </div>
      <pre class="ccb-mac__pre"><code><span class="ccb-mac__c">// floating window component</span>
<span class="ccb-mac__k">import</span> { useState } <span class="ccb-mac__k">from</span> <span class="ccb-mac__s">'react'</span>;

<span class="ccb-mac__k">export default function</span> <span class="ccb-mac__f">App</span>() {
  <span class="ccb-mac__k">const</span> [open, setOpen] = <span class="ccb-mac__f">useState</span>(<span class="ccb-mac__t">true</span>);
  <span class="ccb-mac__k">return</span> open &amp;&amp; <span class="ccb-mac__f">&lt;Panel</span> title=<span class="ccb-mac__s">"Terminal"</span> <span class="ccb-mac__f">/&gt;</span>;
}</code></pre>
    </div>
  </div>
</section>
/* ─── 02 Mac-Style Window Container ──────── */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Outfit:wght@400;600;700&display=swap');

.ccb-mac {
  width: 100%;
  min-height: 320px;
  font-family: 'Outfit', sans-serif;
  background: linear-gradient(135deg, #fbe6c8 0%, #f5b1b1 35%, #c7a6f0 70%, #9ad7f0 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  box-sizing: border-box;
}
.ccb-mac *, .ccb-mac *::before, .ccb-mac *::after { box-sizing: border-box; }

.ccb-mac__scene { width: 100%; max-width: 600px; perspective: 1600px; }
.ccb-mac__window {
  background: #1d1f27;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 40px 70px -24px rgba(76,29,99,.55),
    0 12px 24px -12px rgba(0,0,0,.45);
  transform: rotateX(6deg) rotateZ(-.4deg);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.ccb-mac__window:hover { transform: rotateX(0deg) rotateZ(0deg) translateY(-4px); }
.ccb-mac__titlebar {
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px;
  background: linear-gradient(180deg, #33363f, #282b33);
  border-bottom: 1px solid rgba(0,0,0,.4);
}
.ccb-mac__traffic { display: flex; gap: 9px; }
.ccb-mac__traffic span {
  width: 13px; height: 13px; border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4);
}
.ccb-mac__red    { background: #ff5f57; }
.ccb-mac__yellow { background: #febc2e; }
.ccb-mac__green  { background: #28c840; }
.ccb-mac__filename {
  margin: 0 auto;
  font-family: 'Fira Code', monospace;
  font-size: 13px; color: #aeb3c2; letter-spacing: .02em;
  display: flex; align-items: center; gap: 8px;
}
.ccb-mac__filename::before {
  content: ''; width: 14px; height: 14px; border-radius: 3px;
  background: linear-gradient(135deg, #61dafb, #3b82f6);
}
.ccb-mac__pre {
  margin: 0; padding: 22px 24px 26px;
  font-family: 'Fira Code', monospace;
  font-size: 13.5px; line-height: 1.85; color: #dfe3ee;
  overflow-x: auto;
  background: #1d1f27;
}
.ccb-mac__k { color: #ff79c6; }
.ccb-mac__f { color: #8be9fd; }
.ccb-mac__s { color: #f1fa8c; }
.ccb-mac__c { color: #6272a4; font-style: italic; }
.ccb-mac__t { color: #bd93f9; }
.ccb-mac__pre::-webkit-scrollbar       { height: 8px; }
.ccb-mac__pre::-webkit-scrollbar-thumb { background: #3a3d48; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .ccb-mac__window { transition: none; transform: none; }
  .ccb-mac__window:hover { transform: none; }
}

More from 12 CSS Code Blocks

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

Search CodeFronts

Loading…

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