3D Extruded Text Hover
Heavy lettering with a short extrusion that deepens as the word rises toward you on hover. The depth is ten stacked text-shadows in a darker shade of the accent, so it scales with the font.
Also known as: 3d text effect css, text extrude hover, stacked text shadow.
Depth
HTML
<h2 class="hfx-extruded-text-3d">Depth</h2>
CSS
.hfx-extruded-text-3d {
--c: var(--hfx-color, #3b82f6);
--d: color-mix(in srgb, var(--c) 55%, #000);
margin: 0;
font: 900 1em system-ui, sans-serif;
font-size: calc(var(--hfx-size, 16px) * 3.6);
line-height: 1.1;
letter-spacing: 0.02em;
color: var(--c);
cursor: default;
text-shadow:
0.005em 0.005em 0 var(--d),
0.01em 0.01em 0 var(--d),
0.015em 0.015em 0 var(--d),
0.02em 0.02em 0 var(--d),
0.025em 0.025em 0 var(--d),
0.03em 0.03em 0 var(--d),
0.035em 0.035em 0 var(--d),
0.04em 0.04em 0 var(--d),
0.045em 0.045em 0 var(--d),
0.05em 0.05em 0 var(--d),
0.06em 0.08em 0.08em color-mix(in srgb, var(--c) 25%, transparent);
transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1), text-shadow 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.hfx-extruded-text-3d:hover {
transform: translate(-0.06em, -0.06em);
text-shadow:
0.017em 0.017em 0 var(--d),
0.034em 0.034em 0 var(--d),
0.051em 0.051em 0 var(--d),
0.068em 0.068em 0 var(--d),
0.085em 0.085em 0 var(--d),
0.102em 0.102em 0 var(--d),
0.119em 0.119em 0 var(--d),
0.136em 0.136em 0 var(--d),
0.153em 0.153em 0 var(--d),
0.17em 0.17em 0 var(--d),
0.2em 0.26em 0.22em color-mix(in srgb, var(--c) 30%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.hfx-extruded-text-3d, .hfx-extruded-text-3d *, .hfx-extruded-text-3d::before, .hfx-extruded-text-3d::after, .hfx-extruded-text-3d *::before, .hfx-extruded-text-3d *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}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.