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

사용법

1. 텍스트 입력
2. 2~3색 그라데이션 선택
3. 각도 조정 (90°=세로, 0°=가로)
4. 폰트·배경 설정
5. 애니메이션 옵션

주요 기능

• 2색 또는 3색 그라데이션
• 각도 0~360°
• 5가지 프리셋 (인스타·노을·오션·보라핑크·그린)
• 4가지 폰트
• 색이 흐르는 애니메이션

활용 예시

• 웹사이트 헤드라인 — Hero 섹션 강조
• 로고 텍스트 — 모던 브랜드
• 유튜브 썸네일 — 트렌디 텍스트
• 제품 광고 — 시선 끌기
• 인스타 스토리 — 화려한 텍스트

background-clip: text의 원리

CSS의 마법: background에 그라데이션을 깔고, background-clip:text 로 텍스트 모양으로 자른 후, color:transparent 처리. 결과적으로 텍스트 자체가 그라데이션이 됩니다. Chrome 1+ 부터 지원, 모든 모던 브라우저 호환.

자주 묻는 질문