Weekend in Lisbon
Three days of tiles, tarts and trams.
Neo Brutalist Card Hover
A flat card with a thick outline and a hard offset shadow that grows and turns accent as the card shifts up and left, then presses flat on click. No blur anywhere, which is the whole look.
Also known as: neubrutalism card, hard shadow card hover, offset shadow card css.
HTML
<a class="hfx-card-brutalist" href="#"> <span class="hfx-card-brutalist-tag">New</span> <h3>The weekly zine</h3> <p>Five links and one idea, every Friday.</p> </a>
CSS
.hfx-card-brutalist {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
--hfx-card-brutalist-ink: color-mix(in srgb, var(--c) 20%, #111);
display: block;
box-sizing: border-box;
width: 13em;
padding: 1em 1.1em 1.1em;
border: 2px solid var(--hfx-card-brutalist-ink);
border-radius: 0.5em;
background: #fff;
box-shadow: 0.3em 0.3em 0 var(--hfx-card-brutalist-ink);
color: #111;
font-family: system-ui, sans-serif;
text-decoration: none;
transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.4), box-shadow 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.4);
}
.hfx-card-brutalist:is(:hover, :focus-visible) {
transform: translate(-0.25em, -0.25em);
box-shadow: 0.6em 0.6em 0 var(--c);
}
.hfx-card-brutalist:active {
transform: translate(0.3em, 0.3em);
box-shadow: 0 0 0 var(--c);
}
.hfx-card-brutalist-tag {
display: inline-block;
padding: 0.15em 0.55em;
border: 2px solid var(--hfx-card-brutalist-ink);
border-radius: 0.3em;
background: var(--c);
color: #fff;
font-size: 0.68em;
font-weight: 800;
text-transform: uppercase;
transform: rotate(-4deg);
transition: transform 0.3s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.hfx-card-brutalist:is(:hover, :focus-visible) .hfx-card-brutalist-tag { transform: rotate(4deg) scale(1.1); }
.hfx-card-brutalist h3 {
margin: 0.6em 0 0.25em;
font-size: 1.05em;
font-weight: 800;
}
.hfx-card-brutalist p {
margin: 0;
font-size: 0.8em;
line-height: 1.45;
color: #374151;
}
@media (prefers-reduced-motion: reduce) {
.hfx-card-brutalist, .hfx-card-brutalist *, .hfx-card-brutalist::before, .hfx-card-brutalist::after, .hfx-card-brutalist *::before, .hfx-card-brutalist *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<a href="#" class="group block w-52 rounded-lg border-2 border-black bg-white p-4 shadow-[5px_5px_0_#000] transition duration-200 hover:-translate-x-1 hover:-translate-y-1 hover:shadow-[9px_9px_0_#3b82f6] active:translate-x-1 active:translate-y-1 active:shadow-none"> <span class="inline-block -rotate-3 rounded border-2 border-black bg-blue-500 px-2 text-xs font-extrabold uppercase text-white transition group-hover:rotate-3 group-hover:scale-110">New</span> <h3 class="mt-2 text-lg font-extrabold">The weekly zine</h3> <p class="text-sm text-gray-700">Five links and one idea, every Friday.</p> </a>
Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.