Webleb - UI Elements - CSS Text Color Animation

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");

:root {
		  --bg: #000000;
		  --clr-1: #00c2ff;
		  --clr-2: #be33ff;
		  --clr-3: #40d9ff;
		  --clr-4: #76ff4c;
		
		  --blur: 1rem;
		  --fs: clamp(2rem, 8vw, 5rem);
		  --ls: clamp(-1.75px, -0.25vw, -3.5px);
		}
		
		body {
		  background-color: var(--bg);
		  color: #fff;
		  font-family: "Inter", "DM Sans", Arial, sans-serif;
		}
		
		*,
		*::before,
		*::after {
		  font-family: inherit;
		  box-sizing: border-box;
		}
		
		.content {
		  text-align: center;
		}
		
		.title {
		  font-size: var(--fs);
		  font-weight: 800;
		  letter-spacing: var(--ls);
		  position: relative;
		  overflow: hidden;
		  background: var(--bg);
		  margin: 0;
		}
		
		.aurora {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 2;
		  mix-blend-mode: darken;
		  pointer-events: none;
		}
		
		.clr {
		  overflow: hidden;
		  position: absolute;
		  width: 60vw;
		  height: 60vw;
		  background-color: var(--clr-1);
		  border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
		  filter: blur(var(--blur));
		  mix-blend-mode: overlay;
		}
		
		.clr:nth-of-type(1) {
		  top: -50%;
		  animation: aurora-border 6s ease-in-out infinite,
			aurora-1 12s ease-in-out infinite alternate;
		}
		
		.clr:nth-of-type(2) {
		  background-color: var(--clr-3);
		  right: 0;
		  top: 0;
		  animation: aurora-border 6s ease-in-out infinite,
			aurora-2 12s ease-in-out infinite alternate;
		}
		
		.clr:nth-of-type(3) {
		  background-color: var(--clr-2);
		  left: 0;
		  bottom: 0;
		  animation: aurora-border 6s ease-in-out infinite,
			aurora-3 8s ease-in-out infinite alternate;
		}
		
		.clr:nth-of-type(4) {
		  background-color: 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%;
		  }
		}

JS

CSS Text Color Animation

Recommended