Retro Window Panel (CSS)

Officialby Cube Burst Studios

The chunky retro 'OS window' panel from this very site: title bar, three dots, hard shadow and a lift on hover. Five colours, pure CSS.

⬇ Download ZIP 2.0 KB

Category: Web Dev
File: retro-window.zip
Size: 2.0 KB
Downloads: 0
Added: 16 Oct 2026
Licence: Free to use, no credit needed (CC0)

#css #retro #ui #card #component #y2k

⚑ Report this

The chunky retro 'OS window' panel from this very site: title bar, three dots, hard shadow and a lift on hover. Five colours, pure CSS.

The download has a working demo (index.html) plus the files to copy. The key file is shown below with a Copy button.

component.css

/* Retro Window Panel · Cube Burst Studios · CC0
   <section class="rw rw--mint"><div class="rw__bar"><span class="rw__dots"><i></i><i></i><i></i></span>
   <span class="rw__title">hello.exe</span><span class="rw__max">↗</span></div><div class="rw__body">…</div></section> */
.rw {
	--ink: #18142c; --bar: #5fe3ce;
	background: #fffdf8; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
	font-family: "Space Grotesk", system-ui, sans-serif; color: var(--ink);
	transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s cubic-bezier(.2,.8,.2,1);
}
.rw:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.rw__bar {
	display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px;
	background: var(--bar); border-bottom: 3px solid var(--ink);
	font: 700 14px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase;
}
.rw__dots { display: flex; gap: 6px; }
.rw__dots i { width: 12px; height: 12px; border: 2.5px solid var(--ink); border-radius: 50%; background: #fffdf8; }
.rw__title { flex: 1; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rw__max { font-weight: 700; }
.rw__body { padding: 24px; }
.rw--mint { --bar: #5fe3ce; } .rw--lilac { --bar: #a98aeb; } .rw--lemon { --bar: #f7e065; }
.rw--rose { --bar: #ef4c7a; } .rw--lime { --bar: #b6e95e; }
@media (prefers-reduced-motion: reduce) { .rw { transition: none; } }