Glossy Floor Reflection Text
The title drops onto a glossy floor and bounces to rest while its faded mirror image rises to meet it from below. The reflection is a flipped copy under a gradient mask, on the same keyframes.
Also known as: reflection text effect css, mirror text animation, text reflection on floor.
Horizon
HTML
<div class="txt-glossy-reflection-text"><span class="txt-glossy-reflection-text-word">Horizon</span><span class="txt-glossy-reflection-text-mirror" aria-hidden="true"><span>Horizon</span></span></div>
CSS
.txt-glossy-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-grid;
color: var(--c);
letter-spacing: 0.02em;
line-height: 1.05;}
/* the floor: a soft line between the word and its reflection */
.txt-glossy-reflection-text::after {
content: "";
position: absolute;
left: -0.4em;
right: -0.4em;
top: 50%;
height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 45%, transparent), transparent);
}
.txt-glossy-reflection-text-word {
animation: txt-glossy-reflection-text-drop 1.4s both;
}
.txt-glossy-reflection-text-mirror {
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.45), transparent 80%);
mask-image: linear-gradient(rgba(0, 0, 0, 0.45), transparent 80%);
}
/* flipped, and run on a mirrored drop: it rises as the word falls */
.txt-glossy-reflection-text-mirror span {
display: block;
transform: scaleY(-1);
animation: txt-glossy-reflection-text-drop-mirror 1.4s both;
}
@keyframes txt-glossy-reflection-text-drop {
0% { opacity: 0; transform: translateY(-1em); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
45% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
62% { transform: translateY(-0.18em); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
76% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
86% { transform: translateY(-0.04em); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes txt-glossy-reflection-text-drop-mirror {
0% { opacity: 0; transform: translateY(1em) scaleY(-1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
45% { opacity: 1; transform: translateY(0) scaleY(-1); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
62% { transform: translateY(0.18em) scaleY(-1); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
76% { transform: translateY(0) scaleY(-1); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
86% { transform: translateY(0.04em) scaleY(-1); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
100% { opacity: 1; transform: translateY(0) scaleY(-1); }
}
@media (prefers-reduced-motion: reduce) {
.txt-glossy-reflection-text, .txt-glossy-reflection-text *, .txt-glossy-reflection-text::before, .txt-glossy-reflection-text::after, .txt-glossy-reflection-text *::before, .txt-glossy-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.