그라디언트 텍스트는 background-clip: text로 글자에 부드러운 색 혼합을 채우는 기법입니다 — 수많은 히어로 헤드라인과 랜딩 페이지가 쓰는 효과죠. 애니메이션을 켜면 그라디언트가 글자 사이로 천천히 흐릅니다.
텍스트를 입력하고 두 색과 각도를 고른 뒤 광택 애니메이션을 켜고 CSS를 복사하세요. 출력에 벤더 프리픽스가 포함되어 모든 브라우저에서 작동합니다.
Frequently Asked Questions
Q: 브라우저에서 그라디언트가 안 보이는 이유는?
브라우저에서 그라디언트가 안 보이는 이유는? -webkit-background-clip: text와 -webkit-text-fill-color: transparent가 필요합니다. 출력에 모두 포함되어 있으니 CSS 압축 도구가 지우지 않았는지 확인하세요.
Q: 모든 브라우저에서 작동하나요?
모든 브라우저에서 작동하나요? 네 — Chrome, Edge, Safari, Firefox 모두 background-clip: text를 지원합니다. 아주 오래된 브라우저는 단색 폴백을 먼저 설정하면 단색으로 표시됩니다.
Q: 버튼에 쓸 수 있나요?
버튼에 쓸 수 있나요? 가능하지만 버튼은 동작을 담당하므로 고대비 단색 라벨을 권장합니다. 그라디언트 텍스트는 제목과 장식용 타이틀에 쓰세요.
Q: 두 가지 이상 색을 넣으려면?
두 가지 이상 색을 넣으려면? 출력의 linear-gradient를 편집해 색 스톱을 추가하세요. 예: linear-gradient(90deg, red, yellow, blue).
Q: SEO와 접근성에 괜찮나요?
SEO와 접근성에 괜찮나요? 텍스트는 실제 HTML 텍스트로 남아 SEO에 영향 없음. 대비를 높게 유지하고 본문에서는 피해 가독성을 지키세요.
한국 전통색·오방색
오방색은 한국 전통 색채 체계로, 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 가지 기본색이 방위와 계절을 상징합니다. 단청과 한복, 오방장두루마기에 사용되며, 현대 디자인에서도 전통미를 살리는 배색으로 활용됩니다.
청색 #3B5BA5동쪽과 봄을 상징하는 오방색의 파랑
적색 #C12127남쪽과 여름을 상징하는 강렬한 빨강
황색 #EAC102중앙과 대지를 상징하는 노랑
백색 #F5F5F5서쪽과 가을을 상징하는 순백
흑색 #17191C북쪽과 겨울을 상징하는 깊은 검정
쪽빛 #0067A3쪽풀로 물들인 전통 남색. 청바지의 원조
연두색 #81C147새싹의 연한 초록. 단청에 자주 쓰임
살구색 #F7CE68살구 열매를 닮은 부드러운 노란빛
자주색 #583B7E고귀함을 상징하는 전통 보라
단청색 #2E8B8B궁궐과 사찰 단청의 청록색
Q: 오방색이란 무엇인가요?
오방색이란 무엇인가요? 오방색은 한국 전통 색채 체계로 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 색이 방위와 계절을 상징합니다. 단청, 한복, 오방장두루마기에 사용됩니다.
Q: 단청에 쓰이는 색은 무엇인가요?
단청에 쓰이는 색은 무엇인가요? 단청은 궁궐과 사찰의 목조건축을 장식하는 채색 기법으로, 오방색을 기본으로 청록색(#2E8B8B)과 연두색(#81C147) 등을 조화롭게 사용합니다.