CRT Terminal
Vintage CRT terminal aesthetic: green phosphor text, scanline overlay, macOS traffic lights in the title bar. Active tab shows a blinking caret cursor. Pure CSS.
CRT Terminal the 9th of 32 designs in the 32 CSS Tab Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="tt29">
<div class="tt29win">
<div class="tt29bar">
<span class="tt29light tt29-r"></span>
<span class="tt29light tt29-y"></span>
<span class="tt29light tt29-g"></span>
<span class="tt29ttl">terminal — bash</span>
</div>
<nav class="tt29n">
<input type="radio" name="tt29" id="tt29-r1" checked />
<label class="tt29b" for="tt29-r1">~/main</label>
<input type="radio" name="tt29" id="tt29-r2" />
<label class="tt29b" for="tt29-r2">~/logs</label>
<input type="radio" name="tt29" id="tt29-r3" />
<label class="tt29b" for="tt29-r3">~/cron</label>
</nav>
<div class="tt29body">
<div class="tt29p">$ ls -la<br />drwxr-xr-x src/<br />-rw-r--r-- README.md</div>
<div class="tt29p">$ tail -f app.log<br />[12:04] OK 200<br />[12:05] OK 200</div>
<div class="tt29p">$ crontab -l<br />0 * * * * ./sync.sh<br />*/5 * * * * ./ping.sh</div>
</div>
</div>
</div> .tt29 {
background: #0a0a0a;
padding: 18px 16px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
min-height: 220px;
box-sizing: border-box;
width: 100%;
}
.tt29win {
background: #050505;
border: 1px solid rgba(74, 222, 128, 0.18);
border-radius: 6px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(74, 222, 128, 0.04),
0 8px 24px rgba(0, 0, 0, 0.5);
}
.tt29bar {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: #111;
border-bottom: 1px solid rgba(74, 222, 128, 0.12);
}
.tt29light {
width: 11px;
height: 11px;
border-radius: 50%;
}
.tt29-r {
background: #ff5f57;
}
.tt29-y {
background: #febc2e;
}
.tt29-g {
background: #28c840;
}
.tt29ttl {
margin-left: 10px;
font:
11px/1 ui-monospace,
monospace;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.04em;
}
.tt29n {
display: flex;
gap: 0;
background: #0a0a0a;
border-bottom: 1px solid rgba(74, 222, 128, 0.12);
min-width: 0;
}
.tt29n input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tt29b {
flex: 1;
min-width: 0;
padding: 8px 12px;
font:
11px/1 ui-monospace,
monospace;
color: rgba(74, 222, 128, 0.5);
cursor: pointer;
text-align: center;
white-space: nowrap;
transition:
color 0.2s,
background 0.2s;
border-right: 1px solid rgba(74, 222, 128, 0.08);
}
.tt29b:last-of-type {
border-right: 0;
}
.tt29b:hover {
color: rgba(74, 222, 128, 0.85);
background: rgba(74, 222, 128, 0.04);
}
.tt29n input:checked + .tt29b {
color: #4ade80;
background: rgba(74, 222, 128, 0.1);
text-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}
.tt29n input:focus-visible + .tt29b {
outline: 1px dashed #4ade80;
outline-offset: -3px;
}
.tt29body {
position: relative;
padding: 14px 14px;
min-height: 90px;
background: repeating-linear-gradient(
0deg,
transparent 0,
transparent 2px,
rgba(74, 222, 128, 0.04) 2px,
rgba(74, 222, 128, 0.04) 3px
);
}
.tt29p {
display: none;
font:
11px/1.7 ui-monospace,
monospace;
color: #4ade80;
text-shadow: 0 0 4px rgba(74, 222, 128, 0.4);
}
.tt29:has(#tt29-r1:checked) .tt29p:nth-of-type(1),
.tt29:has(#tt29-r2:checked) .tt29p:nth-of-type(2),
.tt29:has(#tt29-r3:checked) .tt29p:nth-of-type(3) {
display: block;
}