12 CSS Retro UI Designs 11 / 12

Retro Clothing Store Web UI Design

A vintage mail-order catalogue storefront: a double-rule masthead, halftone-textured paper, ticket-stub price tags, a wax-seal discount badge, a product grid with diagonal-weave thumbnails that lift on hover, and an old-school phone-order footer.

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

The code

<div class="ret-11">
  <div class="ret-11__cat">
    <div class="ret-11__masthead">
      <div class="ret-11__brand">The <b>General</b> Goods <em>Co.</em></div>
      <div class="ret-11__est">Catalogue No. 47<br><b>EST. 1974</b> · MAIL ORDER</div>
    </div>

    <div class="ret-11__strip">
      <span>◆ Free shipping over $25 ◆</span>
      <span>★ Satisfaction guaranteed ★</span>
      <span>◆ Order by phone or post ◆</span>
    </div>

    <div class="ret-11__hero">
      <div>
        <h1>Genuine goods,<br><em>honest prices.</em></h1>
        <p>Hand-picked wares from our warehouse to your doorstep. Halftone textures, double-rule borders and ticket-stub price tags — every pixel is pure CSS, no images.</p>
      </div>
      <div class="ret-11__seal">
        <div>
          <div class="big">25%<br>OFF</div>
          <small>This Month Only</small>
        </div>
      </div>
    </div>

    <div class="ret-11__grid">
      <div class="ret-11__item">
        <div class="ret-11__thumb t1"><span class="ret-11__tag">New</span>📻</div>
        <div class="ret-11__info"><h3>Tube Radio</h3><div class="sku">SKU · 0042</div>
          <div class="ret-11__price"><span class="p">$38</span><span class="was">$52</span></div>
          <a href="#" class="ret-11__add">Add to order</a></div>
      </div>
      <div class="ret-11__item">
        <div class="ret-11__thumb t2">📷</div>
        <div class="ret-11__info"><h3>Field Camera</h3><div class="sku">SKU · 0118</div>
          <div class="ret-11__price"><span class="p">$94</span></div>
          <a href="#" class="ret-11__add">Add to order</a></div>
      </div>
      <div class="ret-11__item">
        <div class="ret-11__thumb t3"><span class="ret-11__tag">Sale</span>☎️</div>
        <div class="ret-11__info"><h3>Rotary Phone</h3><div class="sku">SKU · 0076</div>
          <div class="ret-11__price"><span class="p">$29</span><span class="was">$45</span></div>
          <a href="#" class="ret-11__add">Add to order</a></div>
      </div>
      <div class="ret-11__item">
        <div class="ret-11__thumb t4">⌚</div>
        <div class="ret-11__info"><h3>Wind-Up Watch</h3><div class="sku">SKU · 0203</div>
          <div class="ret-11__price"><span class="p">$61</span></div>
          <a href="#" class="ret-11__add">Add to order</a></div>
      </div>
      <div class="ret-11__item">
        <div class="ret-11__thumb t5"><span class="ret-11__tag">Hot</span>🕹️</div>
        <div class="ret-11__info"><h3>Joystick Set</h3><div class="sku">SKU · 0159</div>
          <div class="ret-11__price"><span class="p">$22</span><span class="was">$30</span></div>
          <a href="#" class="ret-11__add">Add to order</a></div>
      </div>
      <div class="ret-11__item">
        <div class="ret-11__thumb t6">🧳</div>
        <div class="ret-11__info"><h3>Travel Trunk</h3><div class="sku">SKU · 0011</div>
          <div class="ret-11__price"><span class="p">$110</span></div>
          <a href="#" class="ret-11__add">Add to order</a></div>
      </div>
    </div>

    <div class="ret-11__order">
      <span class="t">To order, ring us today —</span>
      <span class="phone">☎ 1-800-RETRO-CO</span>
      <button class="cart">🛒 View Cart (3)</button>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=Courier+Prime:wght@400;700&display=swap');

.ret-11, .ret-11 *, .ret-11 *::before, .ret-11 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-11 ::selection{background:#d4451f;color:#f4ecd8}

.ret-11{
  --paper:#f4ecd8;
  --ink:#2b2118;
  --rust:#d4451f;
  --mustard:#e0a92e;
  --teal:#1f6b5e;
  --cream:#fbf6e9;
  font-family:'Courier Prime',monospace;
  background:var(--paper);
  background-image:
    radial-gradient(circle at 50% 50%,rgba(212,69,31,.04) 1px,transparent 1px),
    radial-gradient(circle,rgba(0,0,0,.025) 1px,transparent 1px);
  background-size:8px 8px,4px 4px;
  color:var(--ink);
  min-height:100vh;padding:clamp(14px,3vw,40px);
}
.ret-11__cat{max-width:920px;margin:0 auto;background:var(--cream);border:2px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);position:relative}
/* aged paper edge */
.ret-11__cat::before{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(120,80,30,.12)}

.ret-11__masthead{border-bottom:3px double var(--ink);padding:18px 22px;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px;background:var(--ink);color:var(--paper)}
.ret-11__masthead .ret-11__brand{font-family:'DM Serif Display';font-size:clamp(1.8rem,6vw,3rem);line-height:.9;font-style:italic}
.ret-11__masthead .ret-11__brand b{color:var(--mustard);font-style:normal}
.ret-11__masthead .ret-11__est{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-align:right;line-height:1.6}
.ret-11__est b{color:var(--rust)}

.ret-11__strip{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;background:var(--mustard);color:var(--ink);padding:7px 22px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-bottom:2px solid var(--ink)}

.ret-11__hero{padding:22px;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;border-bottom:2px solid var(--ink)}
@media(max-width:640px){.ret-11__hero{grid-template-columns:1fr}}
.ret-11__hero h1{font-family:'Bebas Neue';font-size:clamp(2.4rem,9vw,4.4rem);line-height:.9;letter-spacing:.01em}
.ret-11__hero h1 em{color:var(--rust);font-style:normal}
.ret-11__hero p{margin-top:10px;font-size:.92rem;line-height:1.5}
.ret-11__seal{aspect-ratio:1;max-width:200px;margin:0 auto;border-radius:50%;background:var(--rust);color:var(--cream);
  display:grid;place-items:center;text-align:center;padding:20px;position:relative;
  box-shadow:0 0 0 4px var(--cream),0 0 0 6px var(--rust)}
.ret-11__seal .big{font-family:'Bebas Neue';font-size:2.6rem;line-height:.85}
.ret-11__seal small{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;display:block;margin-top:6px}
.ret-11__seal::before{content:'★ ★ ★';position:absolute;bottom:14px;font-size:.6rem;letter-spacing:.3em}

.ret-11__grid{padding:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:640px){.ret-11__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.ret-11__grid{grid-template-columns:1fr}}
.ret-11__item{border:1.5px solid var(--ink);background:var(--cream);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.ret-11__item:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.ret-11__thumb{aspect-ratio:1;display:grid;place-items:center;font-size:2.6rem;border-bottom:1.5px solid var(--ink);position:relative;overflow:hidden}
.ret-11__thumb.t1{background:repeating-linear-gradient(45deg,#e8c9a0 0 10px,#dcb98a 10px 20px)}
.ret-11__thumb.t2{background:repeating-linear-gradient(45deg,#bcd9d2 0 10px,#a8cdc4 10px 20px)}
.ret-11__thumb.t3{background:repeating-linear-gradient(45deg,#f0cdbf 0 10px,#e8bba8 10px 20px)}
.ret-11__thumb.t4{background:repeating-linear-gradient(45deg,#e4dca0 0 10px,#d8cf88 10px 20px)}
.ret-11__thumb.t5{background:repeating-linear-gradient(45deg,#cfc4e0 0 10px,#bfb2d6 10px 20px)}
.ret-11__thumb.t6{background:repeating-linear-gradient(45deg,#d9d0c4 0 10px,#cabfb0 10px 20px)}
.ret-11__tag{position:absolute;top:8px;left:8px;background:var(--rust);color:var(--cream);font-size:.6rem;font-weight:700;letter-spacing:.1em;padding:3px 7px;text-transform:uppercase}
.ret-11__info{padding:12px;flex:1;display:flex;flex-direction:column}
.ret-11__info h3{font-family:'DM Serif Display';font-size:1.05rem;line-height:1.1}
.ret-11__info .sku{font-size:.66rem;color:#8a7a64;letter-spacing:.1em;margin:3px 0 8px}
.ret-11__price{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between}
.ret-11__price .p{font-family:'Bebas Neue';font-size:1.6rem;color:var(--teal)}
.ret-11__price .was{font-size:.74rem;text-decoration:line-through;color:#a89880}
.ret-11__add{display:block;text-align:center;margin-top:10px;background:var(--ink);color:var(--cream);text-decoration:none;
  font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:8px;transition:background .2s}
.ret-11__add:hover{background:var(--rust)}

.ret-11__order{border-top:3px double var(--ink);padding:20px 22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;background:var(--teal);color:var(--cream)}
.ret-11__order .t{font-family:'DM Serif Display';font-size:1.2rem;font-style:italic}
.ret-11__order .phone{font-family:'Bebas Neue';font-size:1.8rem;letter-spacing:.04em}
.ret-11__order .cart{background:var(--mustard);color:var(--ink);border:2px solid var(--cream);font-family:'Bebas Neue';font-size:1.2rem;letter-spacing:.05em;padding:8px 22px;cursor:pointer}

@media (prefers-reduced-motion: reduce){.ret-11 *{transition:none !important}}

More from 12 CSS Retro UI Designs

Retro Cassette Player UI Web ComponentVaporwave Aesthetic Website Theme DesignRetro Arcade Game UI Kit90s Website Guestbook WidgetY2K Style Web UI KitASCII Art Web Interface CodeRetro Desktop Portfolio Website TemplateRetro Windows 95 UI (CSS Template)Retro Futuristic Terminal UI Code8 Bit Pixel Art UI Elements & ButtonsNeo Brutalist UI Components Examples
View the full collection →

Search CodeFronts

Loading…

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