Neo-brutalism

네오 브루탈리즘

Thick black borders and a hard offset shadow (no blur) on highly saturated near-primary colors — the currently trendy, friendlier cousin of brutalism.

Also known as: Neubrutalism

···

html

<div class="poster">
  <div class="badge">NEW</div>
  <h1>Ship it.</h1>
  <p>Loud colors, hard shadows, zero apologies.</p>
  <button class="btn" id="btn">Get started</button>
</div>

css

body{background:#fef7e8}
.poster{width:min(88%,320px);background:#fff29e;border:3px solid #111;border-radius:14px;
  padding:22px;position:relative;box-shadow:8px 8px 0 #111;font-family:-apple-system,"Segoe UI",sans-serif}
.badge{position:absolute;top:-14px;right:14px;background:#ff5c8a;border:2px solid #111;border-radius:20px;
  padding:3px 10px;font-size:11px;font-weight:800;box-shadow:3px 3px 0 #111}
h1{margin:6px 0 8px;font-size:clamp(22px,6vmin,32px);font-weight:900;color:#111}
p{margin:0 0 16px;font-size:12px;color:#222;line-height:1.5}
.btn{background:#5b5bf7;color:#fff;border:2.5px solid #111;border-radius:10px;padding:10px 18px;
  font-weight:800;font-size:13px;cursor:pointer;box-shadow:4px 4px 0 #111;
  transition:transform .15s,box-shadow .15s}
.btn.press{transform:translate(4px,4px);box-shadow:0 0 0 #111}

const btn = document.getElementById('btn');
setInterval(() => {
  btn.classList.add('press');
  setTimeout(() => btn.classList.remove('press'), 420);
}, 1600);

If web brutalism meant "strip the decoration away," neo-brutalism — popularised around 2021–2022 in the Gumroad/Figma design community — went the opposite way: decorate boldly, but by a consistent rule. Its signature move is the hard offset shadow with no blur at all, box-shadow: 4px 4px 0 #000.

That usually comes bundled with a thick 2–3px black border, slightly rounded corners, and a "pressed" interaction where clicking a button drops its shadow and shifts the element toward it. Palettes lean into saturated primaries — yellow, pink, lime.

Far friendlier and more playful than original brutalism, it's now common on B2B SaaS landing pages and fintech apps that want to feel trustworthy without being boring.

When to use

Good for startup landing pages and casual SaaS products that want personality. Fix the shadow, border weight and palette as one consistent rule set, or it reads as messy rather than intentionally bold.