텍스트에 그라데이션 색을 입히는 CSS 코드를 만듭니다. 헤더·로고·강조 텍스트에 자주 사용되는 효과.
CSS 코드
텍스트 그라데이션 사용법
- 텍스트와 폰트 크기를 입력합니다.
- 두 색상(또는 3색)과 각도를 선택합니다.
- 프리셋(Sunset, Tropical 등)으로 빠른 시작도 가능합니다.
- 복사로 CSS 코드를 가져갑니다.
주요 기능
- 2색 / 3색 그라데이션 선택
- 각도 0~360° 자유 조정
- 6가지 인기 프리셋
- 실시간 미리보기
- 한 번 클릭으로 CSS 코드 복사
활용 예시
- 웹사이트 메인 헤드라인 강조
- 브랜드 로고 텍스트
- 이벤트·프로모션 메인 카피
- 가격·할인율 강조
- 발표 자료 핵심 메시지
background-clip: text 원리
요소의 배경에 그라데이션을 칠한 후 글자 모양으로만 보이도록 마스킹하는 기법입니다. color: transparent로 원본 글자색을 투명하게 만들면 배경 그라데이션이 글자 모양으로 비칩니다.
자주 묻는 질문
모든 브라우저에서 동작하나요?
모든 모던 브라우저에서 동작합니다. -webkit- 접두사를 함께 쓰면 더 안전합니다.
한글에도 적용되나요?
네, 한글·영문·이모지 모두 동일하게 적용됩니다. 단, 가는 폰트보다 굵은 폰트가 그라데이션이 더 잘 보입니다.
접근성 문제는 없나요?
그라데이션이 강해 가독성이 떨어질 수 있습니다. 본문에는 사용하지 말고 짧은 헤드라인·강조에만 사용하세요. 색맹 사용자도 고려해 색상 대비가 충분하도록 합니다.
애니메이션도 가능한가요?
가능합니다. background-position이나 background-size를 애니메이션하면 그라데이션이 흐르는 효과를 만들 수 있습니다.