Water Reflection Text
A word sits on a still waterline and its mirror image ripples gently underneath, tinted and fading into the depth. The reflection is a flipped copy warped by an animated SVG turbulence filter.
Also known as: water reflection text css, text reflection animation, lake reflection text, rippling reflection effect.
Lakeside
HTML
<div class="txt-water-reflection-text">
<svg class="txt-water-reflection-text-defs" aria-hidden="true" focusable="false">
<filter id="txt-water-reflection-text-ripple" x="-5%" y="-20%" width="110%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.01 0.22" numOctaves="1" seed="2">
<animate attributeName="baseFrequency" dur="4s" values="0.01 0.22;0.012 0.3;0.01 0.22" repeatCount="indefinite" />
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="7" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<span class="txt-water-reflection-text-word">Lakeside</span>
<span class="txt-water-reflection-text-mirror" aria-hidden="true">Lakeside</span>
</div>CSS
.txt-water-reflection-text {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.6);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.2;
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
letter-spacing: 0.01em;
line-height: 1;}
.txt-water-reflection-text-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.txt-water-reflection-text-word {
color: var(--c);
padding-bottom: 0.04em;
border-bottom: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
}
.txt-water-reflection-text-mirror {
background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #0ea5e9), color-mix(in srgb, var(--c) 40%, #0e7490));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
margin-top: -0.2em;
opacity: 0.5;
transform: scaleY(-0.85);
-webkit-mask: linear-gradient(0deg, #000 10%, transparent 85%);
mask: linear-gradient(0deg, #000 10%, transparent 85%);
filter: url(#txt-water-reflection-text-ripple) blur(0.01em);
animation: txt-water-reflection-text-sway 4s ease-in-out infinite;
}
@keyframes txt-water-reflection-text-sway {
0%, 100% { opacity: 0.5; transform: scaleY(-0.85) skewX(0deg); }
50% { opacity: 0.38; transform: scaleY(-0.9) skewX(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
.txt-water-reflection-text-mirror { animation: none; filter: blur(0.01em); }
}
@media (prefers-reduced-motion: reduce) {
.txt-water-reflection-text, .txt-water-reflection-text *, .txt-water-reflection-text::before, .txt-water-reflection-text::after, .txt-water-reflection-text *::before, .txt-water-reflection-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.