✨ 그라데이션 텍스트 생성기
문구를 입력하면 그라데이션 글자 미리보기와 CSS 코드가 즉시 만들어집니다.
사용 방법
- 그라데이션을 입힐 문구를 입력합니다.
- 시작 색·끝 색과 각도를 조절합니다.
- 미리보기로 확인한 뒤 'CSS 복사'를 누릅니다.
이럴 때 유용해요
- 랜딩페이지 메인 카피를 브랜드 색 그라데이션으로 강조할 때
- 블로그 제목·포트폴리오 헤드라인에 포인트를 줄 때
- 앱 스플래시 화면의 로고 타이포그래피를 실험할 때
알아두면 좋은 팁
- -webkit-background-clip: text와 표준 background-clip: text를 함께 선언해야 크롬·사파리·파이어폭스 모두에서 작동합니다.
- 가로로 긴 문구는 90deg(왼→오), 두 줄 이상 제목은 180deg(위→아래)가 자연스럽습니다.
- 글자가 얇으면 그라데이션이 잘 안 보입니다. font-weight 700 이상 굵은 글꼴에서 효과가 극대화됩니다.
자주 묻는 질문
왜 color: transparent가 필요한가요?
background-clip: text는 배경을 글자 모양으로 오려내는 원리입니다. 글자 자체의 색이 남아 있으면 배경을 가리므로, color(또는 -webkit-text-fill-color)를 transparent로 만들어 뒤의 그라데이션이 비치게 하는 것입니다.
모든 브라우저에서 되나요?
크롬·엣지·사파리·파이어폭스 등 최신 브라우저는 모두 지원합니다. 다만 -webkit- 접두사 버전을 함께 써야 안전하며, 이 도구가 생성하는 코드에는 두 가지가 모두 포함되어 있습니다.
그라데이션 텍스트에 그림자를 넣으면 이상해져요.
text-shadow는 투명해진 글자 위에 그려져 그라데이션을 덮어버립니다. 그림자가 필요하면 요소에 filter: drop-shadow()를 쓰면 글자 모양 그대로 그림자만 바깥에 생깁니다.
글자에 애니메이션도 가능한가요?
가능합니다. background-size: 200% 로 배경을 키우고 background-position을 keyframes로 움직이면 그라데이션이 흐르는 효과가 납니다. 복사한 코드에 두 줄만 추가하면 됩니다.
