12 CSS Retro UI Designs04 / 12

Pure CSSMIT licensed

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. Archivo Black + Space Grotesk on a dotted cream grid — deliberately anti-minimal.

Published

Live Demo
Try it

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;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Retro UI Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Neo Brutalist UI Components Examples
Source: https://codefronts.com/design-styles/css-retro-designs/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. Archivo Black + Space Grotesk on a dotted cream grid — deliberately anti-minimal.
## HTML
```html
<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>
```
## CSS
```css
@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;
  }
}
```

Techniques used in this demo

radial-gradient()MDN ↗grid-templateMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →