Aurora

CSS

/* Aurora — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Anton', sans-serif (load from Google Fonts).
 */

@property --text-effect-hue {
  syntax: "<number>";
  inherits: false;
  initial-value: 150;
}

.text-effect {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: -2px;
  text-transform: uppercase;
}

.text-effect {
  --text-effect-hue: 150;
  background: linear-gradient(115deg, hsl(var(--text-effect-hue) 90% 60%) 0%, hsl(calc(var(--text-effect-hue) + 35) 95% 64%) 28%, hsl(calc(var(--text-effect-hue) + 90) 85% 62%) 55%, hsl(calc(var(--text-effect-hue) + 150) 90% 60%) 80%, hsl(var(--text-effect-hue) 90% 60%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 220% 220%;
  filter: drop-shadow(0 0 6px hsl(150 80% 65% / 0.45)) drop-shadow(0 0 22px hsl(150 80% 65% / 0.45));
  animation:
    text-effect-hue-drift 11.5s ease-in-out infinite alternate,
    text-effect-slide 11.5s ease-in-out infinite;
}

@keyframes text-effect-hue-drift {
  0% { --text-effect-hue: 150; }
  100% { --text-effect-hue: 210; }
}
@keyframes text-effect-slide {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Related Elemental & Nature effects

• Fire
• Gooey
• Ice