About this snippet

Tap into nostalgia with this pixel-perfect 90s retro window UI. We used pure CSS borders and rigid shadows to accurately recreate the classic brutalist operating system aesthetic without images.

Size
3.4 KB
Uses
HTML, CSS
Loads
Nothing external
Views
285

Related snippets

<div class="retro-desktop">
  <div class="retro-window">
    <div class="window-titlebar">
      <div class="title-text">C:\Programs\Portfolio.exe</div>
      <div class="window-controls">
        <button class="win-btn">_</button>
        <button class="win-btn">□</button>
        <button class="win-btn close-btn">X</button>
      </div>
    </div>
    
    <div class="window-menu">
      <span>File</span>
      <span>Edit</span>
      <span>View</span>
      <span>Help</span>
    </div>
    
    <div class="window-content">
      <div class="info-box">
        <p>Warning: Nostalgia overload detected.</p>
        <p>This layout uses strict CSS inset/outset border hacks to mimic physical depth from 1995.</p>
      </div>
      <div class="action-row">
        <button class="classic-btn">OK</button>
        <button class="classic-btn">Cancel</button>
      </div>
    </div>
  </div>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: "MS Sans Serif", "Geneva", sans-serif;
  margin: 0;
  background: #008080; /* Classic Teal Desktop */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.retro-window {
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  width: 100%;
  max-width: 500px;
  box-shadow: 1px 1px 0 #808080 inset, -1px -1px 0 #dfdfdf inset;
  padding: 2px;
}

.window-titlebar {
  background: #000080;
  color: #ffffff;
  padding: 3px 3px 3px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.window-controls {
  display: flex;
  gap: 2px;
}

.win-btn {
  background: #c0c0c0;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0;
}

.win-btn:active {
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  padding-top: 2px;
  padding-left: 2px;
}

.window-menu {
  display: flex;
  gap: 16px;
  padding: 6px 10px;
  font-size: 14px;
  border-bottom: 1px solid #808080;
}

.window-menu span::first-letter {
  text-decoration: underline;
}

.window-content {
  padding: 16px;
}

.info-box {
  background: #ffffff;
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.info-box p {
  margin-top: 0;
}

.action-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.classic-btn {
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  padding: 6px 24px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 1px 1px 0 #dfdfdf inset, -1px -1px 0 #808080 inset;
}

.classic-btn:active {
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  box-shadow: none;
  padding-top: 8px;
  padding-left: 26px;
  padding-right: 22px;
  padding-bottom: 4px;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save