Bioluminescent Text
Letters made of glowing plankton specks in your accent color, with a slow wave of light rolling through them like a disturbed tide. Dot layers drift on two vectors under one moving bright band.
Also known as: glowing plankton text, bioluminescence css, deep sea glow text, glowing particle text.
Low Tide
HTML
<div class="txt-bioluminescent-text">Low Tide</div>
CSS
.txt-bioluminescent-text {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.8);
font-family: system-ui, sans-serif;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0.01em;
white-space: nowrap;
background:
linear-gradient(100deg, transparent 32%, color-mix(in srgb, var(--c) 40%, #ecfeff) 50%, transparent 68%) 0 0 / 300% 100% no-repeat,
radial-gradient(circle at 18% 26%, color-mix(in srgb, var(--c) 30%, #ecfeff) 0 0.026em, transparent 0.047em) 0 0 / 0.5em 0.5em,
radial-gradient(circle at 72% 12%, color-mix(in srgb, var(--c) 30%, #ecfeff) 0 0.018em, transparent 0.033em) 0 0 / 0.5em 0.5em,
radial-gradient(circle at 44% 62%, color-mix(in srgb, var(--c) 30%, #ecfeff) 0 0.031em, transparent 0.056em) 0 0 / 0.5em 0.5em,
radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--c) 30%, #ecfeff) 0 0.021em, transparent 0.037em) 0 0 / 0.5em 0.5em,
radial-gradient(circle at 8% 88%, color-mix(in srgb, var(--c) 30%, #ecfeff) 0 0.016em, transparent 0.028em) 0 0 / 0.5em 0.5em,
radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--c) 50%, #67e8f9) 0 0.016em, transparent 0.029em) 0 0 / 0.37em 0.37em,
radial-gradient(circle at 78% 52%, color-mix(in srgb, var(--c) 50%, #67e8f9) 0 0.02em, transparent 0.036em) 0 0 / 0.37em 0.37em,
radial-gradient(circle at 55% 90%, color-mix(in srgb, var(--c) 50%, #67e8f9) 0 0.012em, transparent 0.022em) 0 0 / 0.37em 0.37em,
radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--c) 50%, #67e8f9) 0 0.018em, transparent 0.032em) 0 0 / 0.37em 0.37em,
linear-gradient(180deg, color-mix(in srgb, var(--c) 40%, rgb(14 116 144 / 0.7)), color-mix(in srgb, var(--c) 35%, rgb(8 60 90 / 0.85)));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 0.06em color-mix(in srgb, var(--c) 55%, transparent));
animation:
txt-bioluminescent-text-tide 6s cubic-bezier(0.45, 0, 0.55, 1) infinite,
txt-bioluminescent-text-glow 6s ease-in-out infinite;}
/* Each speck layer drifts a whole number of tiles, so the loop has no seam. */
@keyframes txt-bioluminescent-text-tide {
from { background-position: 120% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
to { background-position: -20% 0, 1em -0.5em, 1em -0.5em, 1em -0.5em, 1em -0.5em, 1em -0.5em, -0.74em 0.37em, -0.74em 0.37em, -0.74em 0.37em, -0.74em 0.37em, 0 0; }
}
@keyframes txt-bioluminescent-text-glow {
0%, 100% { filter: drop-shadow(0 0 0.05em color-mix(in srgb, var(--c) 40%, transparent)); }
50% { filter: drop-shadow(0 0 0.16em color-mix(in srgb, var(--c) 75%, transparent)); }
}
@media (prefers-reduced-motion: reduce) {
.txt-bioluminescent-text { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.txt-bioluminescent-text, .txt-bioluminescent-text *, .txt-bioluminescent-text::before, .txt-bioluminescent-text::after, .txt-bioluminescent-text *::before, .txt-bioluminescent-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.