Animation for text — floating color gradient

Add effectiveness our headings in Weblium using a simple CSS snippet.
This code allows you to create bright, dynamic text with a smooth gradient color change. It is perfect for headlines and important accents on a web page, attracting the attention of users.

How to install:

Copy the code and upload it to the HEAD of the site.
Add class .wl-flowtext to your elements
Enjoy!

<!-- Анімація для тексту — floating color gradient
https:/effects/floating-color-gradient -->

<style>
:root {
  --clr-1: #00c2ff;
  --clr-2: #33ff8c;
  --clr-3: #ffc640;
  --clr-4: #e54cff;
  --blur: 2rem;
}
.aurora {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;mix-blend-mode: darken;pointer-events: none;overflow: hidden}
.aurora__item {position: absolute;width: 60vw;height: 60vw;background: var(--clr-1);border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;filter: blur(var(--blur));mix-blend-mode: overlay}
.aurora__item:nth-of-type(1) {top: -50%;animation: aurora-border 6s ease-in-out infinite,aurora-1 12s ease-in-out infinite alternate}
.aurora__item:nth-of-type(2) {background: var(--clr-3);right: 0;top: 0;animation: aurora-border 6s ease-in-out infinite,aurora-2 12s ease-in-out infinite alternate}
.aurora__item:nth-of-type(3) {background: var(--clr-2);left: 0;bottom: 0;animation: aurora-border 6s ease-in-out infinite,aurora-3 8s ease-in-out infinite alternate}
.aurora__item:nth-of-type(4) {background: var(--clr-4);right: 0;bottom: -50%;animation: aurora-border 6s ease-in-out infinite,aurora-4 24s ease-in-out infinite alternate}
@keyframes aurora-1 {0% {top: 0;right: 0}50% {top: 100%;right: 75%}75% {top: 100%;right: 25%}100% {top: 0;right: 0}}
@keyframes aurora-2 {0% {top: -50%;left: 0%}60% {top: 100%;left: 75%}85% {top: 100%;left: 25%}100% {top: -50%;left: 0%}}
@keyframes aurora-3 {0% {bottom: 0;left: 0}40% {bottom: 100%;left: 75%}65% {bottom: 40%;left: 50%}100% {bottom: 0;left: 0}}
@keyframes aurora-4 {0% {bottom: -50%;right: 0}50% {bottom: 0;right: 40%}90% {bottom: 50%;right: 25%}100% {bottom: -50%;right: 0}}
@keyframes aurora-border {0% {border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%}25% {border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%}50% {border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%}75% {border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%}100% {border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%}}
</style>

<script>
document.querySelectorAll('.wl-flowtext .w-text-content').forEach(title => {
  title.style.position = 'relative';
  let aurora = document.createElement('div');
  aurora.className = 'aurora';
  aurora.innerHTML = '<div class="aurora__item"></div>'.repeat(4);
  title.appendChild(aurora);
});
</script>