Brutalist Card

Hard offset box-shadow gives a bold physical depth effect. Shadow shifts position and color on hover. Pressing moves card into the shadow.

Pure CSS MIT licensed

Brutalist Card the 11th of 20 designs in the 20 CSS Cards with Animations collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<div class="stage-11">
  <div class="card-brute">
    <span class="brute-tag">NEW</span>
    <h4>Brutalist<br />Design</h4>
    <p>Raw edges, hard shadows, zero subtlety. Hover to shift the shadow.</p>
    <button class="brute-btn">CLICK ME</button>
  </div>
</div>

.card-brute {
  width: 200px;
  padding: 18px 20px;
  background: #fff;
  border: 2.5px solid #1a1a1a;
  box-shadow: 6px 6px 0 #1a1a1a;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  cursor: pointer;
}

.card-brute:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #7c6cff;
}

.card-brute:active {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #1a1a1a;
}

.brute-tag {
  font-family: var(--ccg-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #1a1a1a;
  color: #fff;
  padding: 2px 7px;
  display: inline-block;
  margin-bottom: 10px;
}

.card-brute h4 {
  font-size: 16px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  line-height: 1.1;
}

.card-brute p {
  font-size: 11px;
  color: #b8b6d4;
  line-height: 1.5;
  margin-bottom: 12px;
}

.brute-btn {
  width: 100%;
  padding: 7px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  font-family: var(--ccg-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}

.brute-btn:hover {
  background: #7c6cff;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-11 {
  background: #f0ede5;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}

More from 20 CSS Cards with Animations

Notification Stack Card Skeleton Loader Card Magazine Card 3D Mouse Tilt Card Cursor Spotlight Card Interactive Vote Card Glassmorphism Card Neon Gradient Border Card 3D Flip Card Animated Gradient Border Card Stacked Paper Card Holographic Shimmer Card

View the full collection →