# Hard shadow brutal (C 032)

Category: Cards  
Tags: brutalist, neo-brutalist, hard-shadow, thick-border, light  
Page: https://designforai.dev/snippet/card-032

## Prompt

Build a neo-brutalist card: 280px, flat yellow #fef08a background, 3px solid black border, no radius, hard offset shadow 8px 8px 0 #000 (no blur). On hover the card shifts 4px right and down while the shadow shrinks to 4px 4px, so it looks pressed. 22px black 900-weight title, 14px body text, and an uppercase white button with 3px black border and its own 4px hard shadow that inverts to black with yellow text on hover.

## HTML

```html
<article class="card-032">
  <h3>No gradients allowed</h3>
  <p>Thick black lines, flat yellow, and a shadow that does not blur.</p>
  <button>Read it</button>
</article>
```

## CSS

```css
.card-032 {
  width: 280px;
  padding: 22px;
  background: #fef08a;
  border: 3px solid #000;
  border-radius: 0;
  box-shadow: 8px 8px 0 #000;
  font-family: system-ui,sans-serif;
  color: #000;
  transition: transform .12s,box-shadow .12s
}
.card-032:hover {
  transform: translate(4px,4px);
  box-shadow: 4px 4px 0 #000
}
.card-032 h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.01em
}
.card-032 p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5
}
.card-032 button {
  padding: 10px 18px;
  border: 3px solid #000;
  background: #fff;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 #000;
  transition: background .12s,color .12s,box-shadow .12s
}
.card-032 button:hover {
  background: #000;
  color: #fef08a;
  box-shadow: 2px 2px 0 #000
}
.card-032 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```