CSS 그라디언트 텍스트 생성기
CSS 그라디언트 텍스트 효과를 즉시 생성하세요. 색상과 방향을 커스터마이즈하고 CSS 코드를 바로 복사하세요.
0%
100%
미리보기
Hello World
48px
CSS 코드
.gradient-text {
background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}CSS 그라디언트 텍스트란?
CSS 그라디언트 텍스트는 요소의 배경에 그라디언트를 적용한 뒤, background-clip: text로 텍스트 모양에 맞게 잘라내는 기법입니다. 이미지 없이도 눈길을 끄는 타이포그래피를 만들 수 있습니다.
CSS에서 텍스트에 그라디언트 적용하는 방법
요소에 그라디언트 배경을 설정한 뒤 -webkit-background-clip: text와 -webkit-text-fill-color: transparent를 적용하세요. background-clip: text 속성이 배경을 텍스트 모양으로 잘라내어 글자 사이로 그라디언트가 보입니다.
브라우저 호환성
-webkit-background-clip: text는 Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저에서 지원됩니다. 표준 background-clip: text 속성도 잘 지원되므로 두 가지를 함께 사용하는 것이 좋습니다.
자주 묻는 질문
CSS에서 그라디언트 텍스트는 어떻게 만드나요?
배경에 그라디언트를 적용한 뒤 -webkit-background-clip: text와 -webkit-text-fill-color: transparent를 사용하면 텍스트를 통해 그라디언트가 보입니다.
CSS 그라디언트 텍스트는 모든 브라우저에서 작동하나요?
네. -webkit-background-clip: text는 Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저에서 지원됩니다.
Radial이나 Conic 그라디언트도 텍스트에 사용할 수 있나요?
네. 모든 CSS 그라디언트 타입(linear, radial, conic)을 그라디언트 텍스트의 배경으로 사용할 수 있습니다.
-webkit-text-fill-color: transparent가 왜 필요한가요?
-webkit-text-fill-color는 WebKit 브라우저에서 텍스트 색상을 덮어씁니다. transparent로 설정하면 배경 그라디언트가 텍스트를 통해 보입니다.
CSS 그라디언트 텍스트에 애니메이션을 줄 수 있나요?
네. background-position을 애니메이션하거나 background-size와 함께 CSS @keyframes를 사용하면 움직이는 그라디언트 텍스트 효과를 만들 수 있습니다.
color와 -webkit-text-fill-color의 차이는 무엇인가요?
-webkit-text-fill-color는 지원하는 브라우저에서 color보다 우선 적용되어, 그라디언트 배경이 텍스트를 통해 보이게 합니다.