Text fade effect

In this post, I will try to explain how the effect presented below is made.

radial-gradient(circle at 50% -300%, var(--color-primary) 30%, rgba(0,0,0,0) 80%)

This technique of revealing text with a fade-in and fade-out effect can be achieved with few modern CSS tools, such as background-imagebackground-image and background-clipbackground-clip.

Basically, around our text, we will have a divdiv with background-imagebackground-image properties with a radial-gradient()radial-gradient() where the last color needs to be transparent and a background-clip: 'text'background-clip: 'text' which will use the text as a mask.

In our text, we must apply a color: transparentcolor: transparent so that the text does not appear on the screen, and only serves as a mask for the gradient to fill it with its colors.

Thus, when we animate the yy axis of the radial-gradient()radial-gradient(), it will traverse the text revealing the mask, using the colors of the radial-gradient()radial-gradient().