background-clip: text 로 글자 모양 안에만 그라데이션을 채우는 기법. 제목·로고에 흔히 씁니다.
디자인 아틀라스<h1 class="grad">Gradient</h1>h1.grad{margin:0;font-size:clamp(36px,9vmin,64px);font-weight:800;letter-spacing:-.02em;
background:linear-gradient(90deg,#5b5bf7,#ff5c8a,#ffb648,#18c29c,#5b5bf7);background-size:300% 100%;
-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 6s linear infinite}
@keyframes flow{to{background-position:300% 0}}배경으로 그라데이션을 깔고 color: transparent 와 background-clip: text 를 주면 그 배경이 글자 모양대로만 보이게 잘립니다. 여전히 -webkit- 접두사가 필요한 브라우저가 있습니다.
background-size 를 키우고 background-position 을 애니메이션하면 그라데이션이 흐르는 것처럼 보이는 샤인 효과도 만들 수 있습니다.
브랜드 워드마크, 히어로 헤드라인에 씁니다. 본문에는 가독성이 떨어지고, 색맹 사용자에게 텍스트 의미가 색에만 의존하지 않도록 주의하세요.