그라디언트 텍스트

텍스트에 CSS 그라디언트 효과를 적용합니다. 2~4개 색상 정지점, 방향 제어, 프리셋. CSS 복사.

CSS 그라디언트 텍스트 생성기

Create eye-catching gradient text with live preview. Uses the -webkit-background-clip: text technique.

Gradient Text

텍스트

Direction

Font Size: 64pxFont Weight: 700

프리셋

Color Stops (2/6)

100%

생성된 CSS

.gradient-text {
  background: linear-gradient(to right, #00ff88 0%, #00ccff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 64px;
  font-weight: 700;
}

크기 미리보기

24pxGradient Text

36pxGradient Text

48pxGradient Text

72pxGradient Text

그라디언트 텍스트 만드는 방법

텍스트에 CSS 그라디언트 효과를 적용하세요.

1
텍스트 입력스타일을 적용할 텍스트를 입력하세요.
2
색상 선택2~4개의 그라디언트 지점과 방향을 선택하세요.
3
CSS 복사background-clip 코드를 위해 Copy CSS를 클릭하세요.

자주 묻는 질문

Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저에서 작동합니다.

본문 텍스트가 아닌 제목에 사용하세요. 배경과의 대비를 확인하세요.

그라디언트 텍스트

CSS 그라디언트 텍스트 생성기

그라디언트 텍스트 만드는 방법

자주 묻는 질문

관련 도구

그라디언트 텍스트

CSS 그라디언트 텍스트 생성기

그라디언트 텍스트 만드는 방법

자주 묻는 질문

관련 도구