그라데이션 텍스트

그라데이션 글자 효과의 CSS 코드를 만듭니다.

각도90° 크기56px

GRADIENT

제목 한 줄만 조금 더 눈에 띄게 만들고 싶은데, 이미지로 만들자니 수정할 때마다 번거롭습니다. CSS로 글자 자체에 그라데이션을 입히면 텍스트는 그대로 두면서 색만 바꿀 수 있습니다.

이 도구는 문구·색상·각도·글자 크기를 조절하면 그 자리에서 결과를 보여주고, 그대로 쓸 수 있는 CSS를 만들어 줍니다.

어떻게 계산되나요

어떻게 동작하나

글자에 색을 칠하는 게 아니라, 배경에 그라데이션을 깔고 글자 모양으로 잘라내는 방식입니다. 순서는 이렇습니다.

background에 linear-gradient(각도deg, 색1, 색2)를 넣는다
background-clip: text로 배경을 글자 모양대로 자른다
color: transparent로 글자 자체를 투명하게 만들어 잘린 배경이 보이게 한다

세 줄이 모두 있어야 하며, 하나라도 빠지면 그냥 배경색이 깔린 상자로 보입니다.

화면 조작

항목	범위	결과 코드에 반영되는 곳
문구	자유 입력	미리보기에만 사용
색상 1·2	색 선택기	`linear-gradient`의 시작·끝 색
각도	0~360도	`linear-gradient(Ndeg, ...)`
크기	20~100px	미리보기 글자 크기

각도는 0도가 아래에서 위, 90도가 왼쪽에서 오른쪽 방향입니다. '크기'는 미리보기용이라 복사되는 코드에는 들어가지 않으니, 실제 사용할 곳의 font-size는 따로 지정하세요.

붙여넣은 뒤 확인할 것

생성된 코드는 .gradient-text 클래스로 나옵니다. 클래스 이름을 원하는 대로 바꾸고 해당 요소에 달아주면 됩니다. 구형 사파리·웹킷 계열을 함께 지원하려면 -webkit-background-clip: text도 같이 남겨 두는 편이 안전합니다.

용어 정리

linear-gradient: 두 색 이상을 직선 방향으로 자연스럽게 잇는 CSS 배경 함수입니다. 첫 값이 방향(각도)이고 뒤에 색을 나열합니다.
background-clip: text: 배경을 요소 상자가 아니라 글자 모양대로 잘라 보여주는 속성입니다. 글자 그라데이션의 핵심입니다.
color: transparent: 글자색을 투명하게 만들어 뒤에 깔린 배경이 드러나게 합니다. 이 값이 없으면 그라데이션이 글자에 가려집니다.
각도(deg): 그라데이션이 흐르는 방향입니다. 0deg는 아래→위, 90deg는 왼쪽→오른쪽입니다.
-webkit- 접두사: 웹킷 기반 브라우저를 위한 옛 표기입니다. 표준 속성과 함께 써 두면 호환 범위가 넓어집니다.

자주 묻는 질문

글자가 안 보이고 빈칸으로 나옵니다

`color: transparent`는 적용됐는데 `background-clip: text`가 빠졌거나 오타가 났을 때 생기는 증상입니다. 배경이 글자 모양으로 잘리지 않아 투명한 글자만 남습니다. 생성된 세 줄(`background`, `background-clip`, `color`)이 모두 들어갔는지 확인해 보세요.

글자 크기는 왜 코드에 안 들어가나요?

크기 슬라이더는 미리보기에서 그라데이션이 어떻게 보이는지 확인하기 위한 값입니다. 실제 화면에서는 제목 태그나 기존 스타일의 `font-size`를 그대로 쓰는 경우가 많아, 복사 코드에는 색과 자르기 관련 속성만 담았습니다.

색을 세 개 이상 넣을 수 있나요?

이 도구는 두 색까지 지원합니다. 더 필요하면 복사한 코드의 `linear-gradient(...)` 안에 색을 콤마로 추가하면 됩니다. 예를 들어 `linear-gradient(90deg, #1a56db, #ec4899, #f59e0b)`처럼 쓰면 세 색이 이어집니다.

검색엔진이나 스크린리더에서 문제가 되지 않나요?

글자는 이미지가 아니라 그대로 텍스트로 남아 있으므로 검색·복사·읽기에 지장이 없습니다. 다만 그라데이션 색이 배경과 비슷하면 대비가 낮아 읽기 어려울 수 있으니 명도 차이를 충분히 두는 편이 좋습니다.

구형 브라우저에서도 되나요?

`background-clip: text`는 최신 브라우저에서 널리 지원되지만, 아주 오래된 환경에서는 무시될 수 있습니다. 그런 경우 글자가 투명해져 안 보일 수 있으므로, 중요한 문구라면 대체용 `color` 값을 앞쪽에 함께 지정해 두는 방법을 권합니다.