12 CSS Retro UI Designs 04 / 12

Neo Brutalist UI Components Examples

A neo-brutalist component board: 3px black strokes, blunt offset hard-shadows that grow on hover, clashing primaries, an inset-shadow text field, a stepped checkbox-hack toggle, badges, stat tiles and a punch-down CTA.

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

The code

<div class="ret-04">
  <div class="ret-04__grid">

    <div class="ret-04__card c-hello">
      <span class="ret-04__eyebrow">Neo-Brutalism · 2026</span>
      <h1>Raw edges.<br><mark>Hard shadows.</mark><br>No apologies.</h1>
      <p class="ret-04__sub">Thick black strokes, blunt offset shadows and clashing primaries — the anti-minimalist system that refuses to whisper.</p>
    </div>

    <div class="ret-04__card c-tag">
      <h3>Components</h3>
      <div class="ret-04__chips">
        <span class="ret-04__chip">BUTTONS</span>
        <span class="ret-04__chip">TOGGLES</span>
        <span class="ret-04__chip">INPUTS</span>
        <span class="ret-04__chip">CARDS</span>
        <span class="ret-04__chip">BADGES</span>
      </div>
    </div>

    <div class="ret-04__card c-toggle">
      <b>Brutal Switch</b>
      <input type="checkbox" id="ret-04-sw" class="ret-04__sw" checked>
      <label class="ret-04__track" for="ret-04-sw"><span class="ret-04__knob"></span></label>
      <div class="ret-04__state">Status: </div>
    </div>

    <div class="ret-04__card c-input">
      <label class="ret-04__field" for="ret-04-name">Your loud opinion</label>
      <input type="text" id="ret-04-name" placeholder="TYPE SOMETHING UNHINGED…">
    </div>

    <div class="ret-04__card c-stat"><b>99%</b><span>Less Gradient</span></div>
    <div class="ret-04__card c-stat2"><b>0px</b><span>Border Radius</span></div>

    <div class="ret-04__card c-cta">
      <h3>Ship it loud.</h3>
      <span class="ret-04__btn">Grab the kit →</span>
    </div>

  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap');

.ret-04, .ret-04 *, .ret-04 *::before, .ret-04 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ret-04 ::selection{background:#ff4d00;color:#fff}
.ret-04 ::-moz-selection{background:#ff4d00;color:#fff}

.ret-04{
  --paper:#fef0d9;
  --ink:#0d0d0d;
  --orange:#ff4d00;
  --lime:#c4f000;
  --blue:#2b50ff;
  --pink:#ff2e88;
  --cyan:#16e0e0;
  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  font-family:'Space Grotesk',sans-serif;
  background:var(--paper);
  background-image:radial-gradient(var(--ink) 1.4px,transparent 1.4px);
  background-size:26px 26px;
  color:var(--ink);
  min-height:100vh;
  padding:clamp(18px,4vw,52px);
}
.ret-04__grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.ret-04__card{background:#fff;border:3px solid var(--ink);box-shadow:var(--shadow);padding:22px;transition:transform .12s cubic-bezier(.7,0,.2,1),box-shadow .12s}
.ret-04__card:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}

.ret-04 .c-hello{grid-column:span 7;background:var(--lime)}
.ret-04 .c-tag{grid-column:span 5;background:var(--blue);color:#fff}
.ret-04 .c-toggle{grid-column:span 4}
.ret-04 .c-input{grid-column:span 8}
.ret-04 .c-stat{grid-column:span 3;background:var(--pink);color:#fff}
.ret-04 .c-stat2{grid-column:span 3;background:var(--cyan)}
.ret-04 .c-cta{grid-column:span 6;background:var(--orange);color:#fff}
@media(max-width:720px){
  .ret-04 .c-hello,.ret-04 .c-tag,.ret-04 .c-input,.ret-04 .c-cta{grid-column:1/-1}
  .ret-04 .c-toggle,.ret-04 .c-stat,.ret-04 .c-stat2{grid-column:span 6}
}

.ret-04__eyebrow{display:inline-block;background:var(--ink);color:var(--paper);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border:2px solid var(--ink);margin-bottom:16px}
.ret-04 h1{font-family:'Archivo Black';font-size:clamp(2rem,6vw,3.6rem);line-height:.92;letter-spacing:-.02em;text-transform:uppercase}
.ret-04 h1 mark{background:var(--orange);color:#fff;padding:0 6px;box-decoration-break:clone}
.ret-04__sub{font-weight:500;margin-top:14px;font-size:1.02rem;line-height:1.45;max-width:42ch}

.ret-04 .c-tag h3{font-family:'Archivo Black';font-size:1.3rem;text-transform:uppercase}
.ret-04__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ret-04__chip{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:6px 12px;font-weight:700;font-size:.82rem}

.ret-04 label.ret-04__field{display:block;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.ret-04 input[type=text]{width:100%;font-family:'Space Grotesk';font-size:1rem;font-weight:500;padding:13px 14px;border:3px solid var(--ink);background:var(--paper);box-shadow:inset 4px 4px 0 rgba(0,0,0,.08);outline:none}
.ret-04 input[type=text]:focus{background:#fff;box-shadow:inset 4px 4px 0 var(--lime)}

/* toggle switch — checkbox hack */
.ret-04__sw{position:absolute;opacity:0;pointer-events:none}
.ret-04 .c-toggle b{font-family:'Archivo Black';text-transform:uppercase;font-size:.9rem;display:block;margin-bottom:14px}
.ret-04__track{display:inline-flex;align-items:center;width:88px;height:42px;border:3px solid var(--ink);background:#fff;box-shadow:var(--shadow);cursor:pointer;padding:4px;position:relative}
.ret-04__knob{width:30px;height:30px;background:var(--ink);transition:transform .14s steps(3)}
.ret-04__sw:checked ~ .ret-04__track{background:var(--lime)}
.ret-04__sw:checked ~ .ret-04__track .ret-04__knob{transform:translateX(46px);background:var(--orange)}
.ret-04__state{font-weight:700;margin-top:12px;font-size:.82rem}
.ret-04__state::after{content:'OFF'}
.ret-04__sw:checked ~ .ret-04__state::after{content:'ON'}

.ret-04 .c-stat b,.ret-04 .c-stat2 b{font-family:'Archivo Black';font-size:2.4rem;line-height:1;display:block}
.ret-04 .c-stat span,.ret-04 .c-stat2 span{font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}

.ret-04 .c-cta{display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.ret-04 .c-cta h3{font-family:'Archivo Black';font-size:1.5rem;text-transform:uppercase;line-height:1}
.ret-04__btn{align-self:flex-start;background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-family:'Archivo Black';text-transform:uppercase;font-size:.95rem;padding:13px 24px;cursor:pointer;transition:transform .1s,box-shadow .1s}
.ret-04__btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.ret-04__btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}

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

More from 12 CSS Retro UI Designs

Retro Desktop Portfolio Website TemplateRetro Windows 95 UI (CSS Template)Retro Futuristic Terminal UI Code8 Bit Pixel Art UI Elements & ButtonsRetro Cassette Player UI Web ComponentVaporwave Aesthetic Website Theme DesignRetro Arcade Game UI Kit90s Website Guestbook WidgetY2K Style Web UI KitRetro Clothing Store Web UI DesignASCII Art Web Interface Code
View the full collection →

Search CodeFronts

Loading…

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