그라데이션 텍스트
두 색만 고르면 붙여넣을 CSS가 바로 완성됩니다 · 복사해서 붙여넣기만 하면 끝
문구를 입력하면 실시간으로 미리보기됩니다
클립보드에 CSS 전체가 복사됩니다
설명
두 색과 각도를 조절해 그라데이션 글자 CSS(background-clip: text)를 만들고 코드를 복사합니다. 제목·로고 텍스트 꾸미기에 활용하세요.
관련 도구
그라데이션 텍스트 생성기는 두 가지 색상을 지정하면 글자에 그라데이션을 입히는 CSS 코드를 자동으로 만들어주는 도구입니다. 섹션 제목이나 로고 텍스트에 시각적 포인트를 주고 싶을 때, 직접 CSS를 작성하지 않고 바로 코드를 얻을 수 있습니다. 생성된 코드를 복사해 HTML 파일이나 스타일시트에 붙여넣기만 하면 바로 적용됩니다.
사용 방법
시작 색상과 끝 색상을 컬러 피커 또는 HEX 코드 입력으로 지정합니다. 미리보기 텍스트 창에서 원하는 문구를 입력하면 실시간으로 결과를 확인할 수 있습니다. 그라데이션 방향(좌→우, 우→좌, 상→하 등)을 선택할 수 있으면 해당 옵션도 조정합니다. 마음에 드는 결과가 나오면 CSS 코드 블록의 복사 버튼을 눌러 클립보드에 저장하고, 프로젝트의 CSS 파일에 붙여넣습니다.
생성 코드 원리와 적용 팁
그라데이션 텍스트는 'background: linear-gradient(...)', 'background-clip: text', '-webkit-background-clip: text', 'color: transparent' 네 가지 속성의 조합으로 구현됩니다. 배경에 그라데이션을 그린 뒤 텍스트 모양으로 잘라내는 방식이므로, 해당 요소의 배경이 단색이어야 의도한 대로 보입니다. '-webkit-background-clip'은 Chrome, Safari 등 WebKit 계열을 위한 접두사이며, Firefox는 접두사 없는 'background-clip: text'를 지원합니다. 현재 모든 주요 브라우저에서 정상 동작하므로 실무 사용에 무리가 없습니다. 글자 크기가 클수록 그라데이션 효과가 뚜렷하게 보이므로 제목 요소(h1, h2)에 사용할 때 가장 효과적입니다.
이럴 때 유용해요
랜딩 페이지의 주요 헤드라인, 포트폴리오 사이트의 이름 표기, 유튜브 채널 아트 문구 등 시각적 강조가 필요한 곳에 쓰입니다. 브랜드 컬러 두 가지를 그라데이션으로 연결하면 일관된 아이덴티티를 줄 수 있습니다. React, Vue 등 컴포넌트 기반 프레임워크에서도 생성된 CSS를 인라인 스타일 또는 styled-components에 그대로 적용할 수 있습니다.
자주 묻는 질문
생성된 코드가 모든 브라우저에서 동작하나요?
그라데이션 색상을 3가지 이상 쓸 수 있나요?
텍스트에 그라데이션을 적용했는데 배경도 같이 물들어 보여요.
Tailwind CSS에서도 이 방식이 동작하나요?
그라데이션 방향은 어떤 값을 쓸 수 있나요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
그라데이션 텍스트 도구, 이렇게 씁니다
시작 색과 끝 색 두 가지를 고르면 그 즉시 아래에 완성된 CSS 코드가 만들어집니다. 미리보기 글자에 두 색이 자연스럽게 번지는 모습을 확인하고, 마음에 들면 복사 버튼을 눌러 그대로 붙여넣으면 끝입니다. 색은 컬러 피커로 클릭해 고르거나 #FF6B6B 같은 HEX 값을 직접 입력할 수 있어, 브랜드 지정 색을 정확히 맞출 때 편리합니다. 각도를 조절할 수 있는 경우 값을 바꿔가며 좌→우, 위→아래, 대각선 흐름을 즉석에서 비교할 수 있습니다.
어떻게 글자에 그라데이션이 입혀지나
이 효과의 핵심은 글자 색을 직접 칠하는 게 아니라, 요소 배경에 그린 그라데이션을 글자 모양대로 오려내는 방식입니다. 그래서 생성되는 코드는 아래 네 줄이 한 세트로 움직입니다.
| 속성 | 역할 |
|---|---|
background: linear-gradient(90deg, 색1, 색2) | 요소 사각 영역에 두 색의 그라데이션을 채움 |
-webkit-background-clip: text | WebKit(Chrome·Safari)용 접두사 — 배경을 글자 모양으로 잘라냄 |
background-clip: text | 표준 속성 — 배경을 글자(글리프) 모양으로만 잘라냄 |
color: transparent | 글자 원래 색을 투명 처리해 배경이 비쳐 보이게 함 |
즉 각도의 기준은 글자 하나가 아니라 텍스트가 놓인 박스 전체입니다. 한 줄에 여러 글자가 있으면 첫 글자와 끝 글자의 색이 달라지고, 글자 하나하나 안에서 색이 다 도는 게 아니라는 점을 알아두면 결과를 예측하기 쉽습니다.
이럴 때 쓰면 좋습니다
페이지 최상단의 큰 헤드라인, 랜딩 페이지의 한 줄 슬로건, 로고 옆 서비스명처럼 크고 굵은 글자에서 효과가 가장 잘 삽니다. 반대로 본문처럼 작은 글씨에 쓰면 색 차이가 잘 안 보이고 가독성만 떨어지니 피하는 편이 낫습니다. 두 색은 명도 차이가 적당히 나는 조합(예: 보라→파랑, 주황→분홍)이 자연스럽고, 너무 밝은 색과 흰 배경을 함께 쓰면 글자가 묻힐 수 있어 대비를 확인해야 합니다.
실전 팁
• font-weight: bold를 함께 주면 글자 획이 두꺼워져 그라데이션 면적이 넓어지고 색이 훨씬 선명하게 보입니다.
• 각도를 90deg로 두면 왼쪽에서 오른쪽으로, 180deg는 위에서 아래로 흐릅니다. 대각선 느낌은 45deg가 무난합니다.
• 세 가지 이상 색을 쓰고 싶다면 생성된 linear-gradient(...) 안에 색을 콤마로 더 추가하면 됩니다.
• 배경이 어두운 사이트라면 밝은 두 색을, 밝은 사이트라면 채도 있는 색을 골라야 글자가 살아납니다.
자주 묻는 질문
글자가 안 보이고 투명하게만 나와요.
background-clip: text는 지원하지만 -webkit- 접두사가 필요한 브라우저가 있습니다. 생성 코드에 포함된 -webkit-background-clip: text와 background-clip: text 두 줄, 그리고 color: transparent까지 함께 붙여넣었는지 확인하세요. 또한 이 효과가 적용된 요소에는 실제 텍스트가 들어 있어야 하며, color: transparent만 있고 background에 그라데이션이 없으면 글자가 투명해져 사라집니다.
각도를 바꿨는데 글자 하나 안에서는 색이 안 변해요.
정상입니다. 그라데이션은 글자 낱개가 아니라 텍스트 전체가 차지하는 사각 영역을 기준으로 칠해집니다. 한 글자 안에서 색이 크게 돌게 하려면 그 글자만 따로 요소로 감싸거나 글자 크기를 키워 면적을 넓히면 됩니다.
이 코드를 상업적으로 써도 되나요?
생성되는 것은 표준 CSS 문법일 뿐 저작권이 걸린 코드가 아닙니다. 웹사이트, 상업 프로젝트 어디에나 자유롭게 붙여 쓸 수 있습니다.
텍스트 그림자(text-shadow)를 같이 넣을 수 있나요?
글자 색이 투명 처리되기 때문에 일반 text-shadow는 예상과 다르게 보일 수 있습니다. 그림자가 꼭 필요하면 요소를 감싸는 부모에 filter: drop-shadow(...)를 적용하는 방식이 더 안정적입니다.