Gradient Mask Text
アニメーションするグラデーションがテキストをマスクし、色が流れ続ける。
HTML
<h2 class="gmt-text">Gradient Flow</h2>
CSS
.gmt-text {
font-size: 42px;
font-weight: 900;
letter-spacing: 2px;
background: linear-gradient(90deg, #6366f1, #ec4899, #f97316, #6366f1);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gmt-flow 3s linear infinite;
}
@keyframes gmt-flow {
0% { background-position: 0% 50%; }
100% { background-position: 300% 50%; }
}