Retro Shadow Text Hover
The word hops up and to the left, leaving two hard offset shadows behind it in the accent color, like a misregistered 70s print. Two text-shadow layers grow out from zero offset.
Also known as: offset text shadow hover, retro pop text, double shadow text.
Groovy
HTML
<div class="hfx-text-retro-shadow">Groovy</div>
CSS
.hfx-text-retro-shadow {
--c: var(--hfx-color, #3b82f6);
font-size: calc(var(--hfx-size, 16px) * 2.5);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.15;
cursor: default;
display: inline-block;
font-weight: 900;
text-shadow: 0 0 var(--c), 0 0 color-mix(in srgb, var(--c) 45%, transparent);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
text-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);}
.hfx-text-retro-shadow:hover {
transform: translate(-0.08em, -0.08em);
text-shadow: 0.08em 0.08em var(--c), 0.16em 0.16em color-mix(in srgb, var(--c) 40%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.hfx-text-retro-shadow, .hfx-text-retro-shadow *, .hfx-text-retro-shadow::before, .hfx-text-retro-shadow::after, .hfx-text-retro-shadow *::before, .hfx-text-retro-shadow *::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.
<span class="inline-block text-5xl font-black transition duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] hover:-translate-x-1 hover:-translate-y-1 hover:[text-shadow:4px_4px_#3b82f6,8px_8px_rgb(59_130_246/0.4)]"> Groovy </span>
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.