Ripple Gradient Text: CSS Text Animation

Ripple Gradient Text

Rings of color spread outward from the middle of the word without end. A registered length property offsets every stop of a repeating radial gradient by exactly one ring per cycle.

Also known as: radial gradient text animation, concentric rings text, sound wave text css.

Sound Waves

Color Font size 40px Dark background

HTML

<div class="txt-ripple-gradient-text">Sound Waves</div>

CSS

@property --txt-ripple-gradient-text-o {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.txt-ripple-gradient-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-weight: 900;
  background: repeating-radial-gradient(circle at 50% 50%,
    var(--c) var(--txt-ripple-gradient-text-o),
    var(--c) calc(var(--txt-ripple-gradient-text-o) + 0.1em),
    color-mix(in srgb, var(--c) 30%, #e879f9) calc(var(--txt-ripple-gradient-text-o) + 0.3em),
    var(--c) calc(var(--txt-ripple-gradient-text-o) + 0.5em));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: txt-ripple-gradient-text-spread 1.4s linear infinite;}
@keyframes txt-ripple-gradient-text-spread {
  to { --txt-ripple-gradient-text-o: 0.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .txt-ripple-gradient-text, .txt-ripple-gradient-text *, .txt-ripple-gradient-text::before, .txt-ripple-gradient-text::after, .txt-ripple-gradient-text *::before, .txt-ripple-gradient-text *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --txt-color on the element or a parent. Currently previewing #3b82f6.
Font size: set --txt-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 40px.
Speed: change the duration on the transition or animation shorthand. 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.

Ripple Gradient Text

HTML

CSS

Customizing this snippet

Similar text animations