CSS 그라데이션 텍스트 생성기

그라데이션 글자는 요소의 배경에 그라데이션을 칠하고, background-clip: text로 그 배경을 글자 모양으로 잘라 낸 뒤, 글자색을 투명하게 해서 그라데이션이 비쳐 보이게 만듭니다. 이 생성기는 일부 브라우저에서 아직 필요한 -webkit- 접두사를 포함한 규칙을 쓰고, 지원하지 않는 브라우저가 단색으로 돌아가도록 @supports로 감싸며, 결과를 브라우저에서 바로 보여 줍니다.

사용 방법

1. 글자를 입력하고 그라데이션 색상을 둘에서 여덟 개까지 고릅니다(한 줄에 하나, 위치는 선택).
2. 각도, 글자 크기, 두께, 글꼴을 정합니다.
3. "글자 너비에 맞춤"을 켜 두면 짧은 제목에서도 그라데이션 전체가 보입니다.
4. CSS와 HTML을 복사하고 대체 색의 명암비를 확인하세요.

계산식

background-image: linear-gradient(<각도>, <색상>); background-clip: text; -webkit-text-fill-color: transparent;

그라데이션은 요소 상자 크기에 맞춰지므로, 너비 전체를 차지하는 제목에서는 글자 뒤에 그라데이션의 일부만 놓입니다. display: inline-block은 상자를 글자 크기로 줄입니다. 다른 색을 고르지 않으면 대체 색은 첫 그라데이션 색입니다.

예시

기본값은 산호색에서 복숭아색으로 이어지는 제목을 만듭니다. linear-gradient(90deg, #ff7e5f, #feb47b)를 64 px, 두께 800의 글자에 잘라 입히고, @supports 밖의 대체 색으로 color: #ff7e5f를 씁니다. 이 대체 색은 흰색 위에서 2.49:1에 그쳐 큰 글자에 WCAG가 요구하는 3:1에도 못 미치므로, 제목이 의미를 담고 있다면 더 어두운 색을 고르세요.