Vercel
Gradient
Animation

Today we are going to take a look at the text gradient effect on the Vercel.com website. The effect is possible entirely by using CSS Animations, no Javascript necessary.

First we define some variables to use for our gradients:

 --gradient-color-1: #ef008f;
 --gradient-color-2: #6ec3f4;
 --gradient-color-3: #7038ff;
 --gradient-color-4: #c9c9c9;

Now let’s create the basic HTML layout for this effect:

<section class="section-process">
	<div class="section-container">
		<div class="process-steps-container container-medium with-padding">
			<div class="process-step-container process-step-1">
				<div class="process-step-title-container">
					<h1 class="process-step-title">
						Develop
					</h1>
					<div class="process-step-title-overlay">
						Develop
					</div>
				</div>
			</div>
			<div class="process-step-container process-step-2">
				<div class="process-step-title-container">
					<h1 class="process-step-title">
						Develop
					</h1>
					<div class="process-step-title-overlay">
						Develop
					</div>
				</div>
			</div>
			<div class="process-step-container process-step-3">
				<div class="process-step-title-container">
					<h1 class="process-step-title">
						Develop
					</h1>
					<div class="process-step-title-overlay">
						Develop
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

After that we create our style for the text overlay class .process-step-title-overlay which will contain the gradient as a background.

.process-step-title-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

We define the overlay to be positioned absolutely and on the top left taking 100% of the size, which mean this div will be exactly the same size as the h1 given that we applied the same font styles.

Now we create the animation keyframes:

@keyframes animated-gradient-title-1 {
	0%, 16.667%, 100% {
		opacity: 1;
	}

	33.333%, 83.333% {
		opacity: 0;
	}
}

@keyframes animated-gradient-title-2 {
	0%, 16.667%, 66.667%, 100% {
                opacity:0
        }

	33.333%, 50% {
		opacity: 1;
	}
}

@keyframes animated-gradient-title-3 {
	0%, 50%, 100% {
		opacity: 0;
	}

	66.667%, 83.333% {
		opacity: 1;
	}
}

The only important thing here is to always start fading out one overlay at the same keyframe position as you start fading in the other overlay, so you get a smooth continuous transition between the texts. Our animation consists of 6 different keyframes at 0% (keyframe 1), 16.67% (2), 33.33% (3), 50% (4), 67.67% (5) and 83.33% (6), 100% (1) being the same as 0%.

Example:

We start out at 0% (keyframe 1) for which only the first gradient text has full opacity. The others are invisible.

The first text will be full visible until our second keyframe and will fade out between keyframe 2 and 3. At the same time at keyframe 2 you can see the second animation fading in to full opacity until keyframe 3. Then the second text is visible for one keyframe and starts fading out while the 3rd text fades in.

In conclusion, every text goes from invisible to visible back to invisible within 4 keyframes.

• Text 1: Animated during keyframe 6,1,2,3
• Text 2: Animated during keyframe 2,3,4,5
• Text 3: Animated during keyframe 4,5,6,1

Here you see the last two keyframes match the first two of the next text making them fade in / fade out simoultaneously.

After that we use our animation on the text overlay and set it to infinite in order for it to repeat, and also set the gradient colors inside:

.process-step-1 .process-step-title-overlay {
	background-image: linear-gradient(90deg, var(--gradient-color-1), var(--gradient-color-2));
	animation: animated-gradient-title-1 8s infinite;
}

.process-step-2 .process-step-title-overlay {
	background-image: linear-gradient(90deg, var(--gradient-color-2), var(--gradient-color-3));
	animation: animated-gradient-title-2 8s infinite;
}

.process-step-3 .process-step-title-overlay {
	background-image: linear-gradient(90deg, var(--gradient-color-3), var(--gradient-color-1));
	animation: animated-gradient-title-3 8s infinite;
}

Every animation has to be the exact same length, since the delay between them is already set in the keyframes.

Codepen

Check out the full code here:

See the Pen Vercel like text gradient transition by Kevin Hufnagl (@kevinhufnagl) on CodePen.