20 CSS Cards with Animations 11 / 20
Brutalist Card
Hard offset box-shadow gives a bold physical depth effect.
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> <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;
} .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 CardSkeleton Loader CardMagazine Card3D Mouse Tilt CardCursor Spotlight CardInteractive Vote CardGlassmorphism CardNeon Gradient Border Card3D Flip CardAnimated Gradient Border CardStacked Paper CardHolographic Shimmer Card
View the full collection →