Neumorphic Emboss Wave Text
Soft UI letters molded from the card itself rise into relief and sink back into it one after another, a slow wave across the word. Each letter swaps a light and a dark soft text-shadow on a stagger.
Also known as: css text emboss, css emboss text, neumorphism text css, soft ui embossed text.
Softness
HTML
<div class="txt-neumorphic-wave-text"><span style="--i: 0">S</span><span style="--i: 1">o</span><span style="--i: 2">f</span><span style="--i: 3">t</span><span style="--i: 4">n</span><span style="--i: 5">e</span><span style="--i: 6">s</span><span style="--i: 7">s</span></div>
CSS
.txt-neumorphic-wave-text {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.6);
font-family: system-ui, sans-serif;
font-weight: 900;
line-height: 1.2;
--surface: color-mix(in srgb, var(--c) 4%, #e6e9ef);
display: inline-block;
padding: 0.35em 0.75em;
border-radius: 0.45em;
background: var(--surface);
box-shadow:
inset 0.05em 0.05em 0.1em rgb(255 255 255 / 0.8),
inset -0.05em -0.05em 0.12em rgb(15 23 42 / 0.08),
0 0 0 1px rgb(15 23 42 / 0.05),
0 0.3em 0.8em -0.3em rgb(15 23 42 / 0.35);
white-space: nowrap;
letter-spacing: 0.02em;}
.txt-neumorphic-wave-text span {
display: inline-block;
color: color-mix(in srgb, var(--surface) 62%, #475569);
text-shadow: -0.035em -0.035em 0.05em rgb(255 255 255 / 0.95), 0.04em 0.04em 0.06em rgb(15 23 42 / 0.32);
animation: txt-neumorphic-wave-text-mold 3.6s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--i) * 0.13s) infinite;
}
@keyframes txt-neumorphic-wave-text-mold {
0%, 100% { text-shadow: -0.035em -0.035em 0.05em rgb(255 255 255 / 0.95), 0.04em 0.04em 0.06em rgb(15 23 42 / 0.32); }
50% { text-shadow: 0.025em 0.025em 0.02em rgb(255 255 255 / 0.95), -0.025em -0.025em 0.02em rgb(15 23 42 / 0.38); }
}
@media (prefers-reduced-motion: reduce) {
.txt-neumorphic-wave-text span { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.txt-neumorphic-wave-text, .txt-neumorphic-wave-text *, .txt-neumorphic-wave-text::before, .txt-neumorphic-wave-text::after, .txt-neumorphic-wave-text *::before, .txt-neumorphic-wave-text *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - 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.