Ink Bleed Text
Ink drops land on a paper card and spread into letters with soft, feathered edges, then fade back into the fibers. Each letter animates a blur that a parent SVG threshold filter turns into wet ink.
Also known as: ink bleed text, ink text animation css, ink spreading text, watercolor ink text.
Inkwell
HTML
<div class="txt-ink-bleed-text">
<svg class="txt-ink-bleed-text-defs" aria-hidden="true" focusable="false">
<filter id="txt-ink-bleed-text-ink" x="-10%" y="-30%" width="120%" height="160%">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 14 -5.4" result="ink" />
<feTurbulence type="fractalNoise" baseFrequency="0.09" numOctaves="3" seed="3" result="fiber" />
<feDisplacementMap in="ink" in2="fiber" scale="1.6" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<span class="txt-ink-bleed-text-word"><span style="--i: 0">I</span><span style="--i: 1">n</span><span style="--i: 2">k</span><span style="--i: 3">w</span><span style="--i: 4">e</span><span style="--i: 5">l</span><span style="--i: 6">l</span></span>
</div>CSS
.txt-ink-bleed-text {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.6);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
position: relative;
display: inline-block;
padding: 0.35em 0.8em 0.4em;
border-radius: 0.3em;
background: #fbf8f1;
box-shadow: 0 0 0 1px rgb(120 100 60 / 0.12), 0 0.3em 0.8em -0.3em rgb(60 40 10 / 0.25);
font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif;
font-style: italic;
letter-spacing: 0.01em;}
.txt-ink-bleed-text-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.txt-ink-bleed-text-word {
display: block;
color: color-mix(in srgb, var(--c) 55%, #0b1020);
filter: url(#txt-ink-bleed-text-ink);
}
.txt-ink-bleed-text-word span {
display: inline-block;
animation: txt-ink-bleed-text-spread 6s cubic-bezier(0.25, 0.6, 0.3, 1) calc(var(--i) * 0.08s - 2s) infinite;
}
@keyframes txt-ink-bleed-text-spread {
0% { opacity: 1; filter: blur(0.11em); }
9% { opacity: 1; filter: blur(0.012em); }
84% { opacity: 1; filter: blur(0.035em); }
93%, 100% { opacity: 0; filter: blur(0.035em); }
}
@media (prefers-reduced-motion: reduce) {
.txt-ink-bleed-text-word span { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.txt-ink-bleed-text, .txt-ink-bleed-text *, .txt-ink-bleed-text::before, .txt-ink-bleed-text::after, .txt-ink-bleed-text *::before, .txt-ink-bleed-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.