CSS 그라디언트 텍스트 생성기
텍스트에 그라디언트를 적용하는 CSS 코드를 생성합니다. 색상, 방향, 범위 조정을 실시간으로 미리봅니다.
Gradient Text
0%
100%
.gradient-text {
background: linear-gradient(to right, #ec4899 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 48px;
font-weight: 700;
}이 도구 공유
📖
사용 방법
Step 1
텍스트 입력
그라디언트를 적용할 텍스트를 입력합니다
→
Step 2
그라디언트 설정
그라디언트 색상, 방향, 유형 등을 조정합니다
→
Step 3
CSS 복사
생성된 CSS 코드를 복사합니다
✨
기능
실시간 미리보기
그라디언트 텍스트를 실시간으로 미리봅니다
다양한 그라디언트
선형, 방사형, 원뿔형 그라디언트와 여러 색상 중지점을 지원합니다
프리셋 포함
인기 있는 그라디언트 프리셋을 원클릭으로 적용합니다
❓
FAQ
background-clip: text를 사용하여 그라디언트 배경을 텍스트에 적용하는 CSS 기법입니다.
🔗관련 도구
🎨
디자인 도구색상 코드 변환기
HEX, RGB, HSL 색상 코드 간 변환을 합니다. 색상 선택기와 실시간 미리보기로 직관적인 색상 선택이 가능합니다.
🎨
디자인 도구색상 선택기
색상 휠과 슬라이더로 직관적으로 색상을 선택하세요. HEX, RGB, HSL 형식의 색상 코드를 확인하고 복사할 수 있습니다.
🎨
디자인 도구이미지 색상 추출기
이미지에서 대표 색상을 자동으로 감지하고 색상 팔레트를 생성합니다. 이미지의 아무 곳이나 클릭하여 개별 색상을 추출할 수도 있습니다.
🎯
디자인 도구이미지 평균 색상 추출기
이미지 전체 또는 선택 영역의 평균 색상을 계산합니다. 색상 배합이나 썸네일 배경색 선택에 유용합니다.
🌈
디자인 도구CSS 그라데이션 생성기
드래그 조작으로 CSS 그라데이션을 시각적으로 만듭니다. 선형, 원형, 원추형 그라데이션 유형과 프리셋을 지원합니다.
🔲
디자인 도구CSS 박스 그림자 생성기
슬라이더로 CSS box-shadow를 시각적으로 만듭니다. 다중 그림자와 내부 그림자를 지원합니다.