CSS Utility

흐르는 그라데이션 텍스트

background-clip:text + 좌우로 긴 그라데이션을 background-position으로 키프레임 이동. JS 없는 순수 CSS.

색

속도

Headline

Built for the modern web.

Inline brand

안녕, 새로운 그라데이션의 세계.

핵심 CSS

.gradient-text {
  background: linear-gradient(90deg, #7c3aed, #ec4899, #f59e0b, #10b981, #06b6d4, #7c3aed);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: flow 5s linear infinite;
}
@keyframes flow {
  to { background-position: 200% 50%; }
}