Wix CSS - Holographic Shimmer Effect

.css-tutorial {

background: linear-gradient(45deg, #ff6ec7, #ff9a56, #ffcd3c, #a8e6cf, #88d8c0, #c7ceea, #ff6ec7);

background-size: 400% 400%;

background-clip: text;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

color: transparent;

animation: holographicShimmer 3s ease-in-out infinite;

position: relative;

}

.css-tutorial::before {

content: attr(data-text);

position: absolute;

top: 0;

left: 0;

background: linear-gradient(45deg, #ff6ec7, #ff9a56, #ffcd3c, #a8e6cf, #88d8c0, #c7ceea, #ff6ec7);

background-size: 400% 400%;

background-clip: text;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

color: transparent;

animation: holographicShimmer 3s ease-in-out infinite reverse;

filter: blur(1px);

opacity: 0.7;

}

@keyframes holographicShimmer {

0%, 100% {

background-position: 0% 50%;

filter: hue-rotate(0deg);

}

25% {

background-position: 50% 100%;

filter: hue-rotate(90deg);

}

50% {

background-position: 100% 50%;

filter: hue-rotate(180deg);

}

75% {

background-position: 50% 0%;

filter: hue-rotate(270deg);

}

}