두 색상과 그라데이션 방향(각도)을 선택하면 미리보기와 CSS 코드가 실시간으로 갱신됩니다. 복사 버튼으로 한 줄 코드를 바로 가져갈 수 있습니다.
135°

CSS 코드

CSS 그라데이션 생성기 사용법

  1. 시작 색상과 끝 색상을 컬러 피커로 선택합니다.
  2. 각도 슬라이더 또는 프리셋 버튼으로 그라데이션 방향을 정합니다.
  3. 미리보기를 보며 원하는 결과가 나올 때까지 조정합니다.
  4. 복사 버튼을 눌러 CSS 코드를 클립보드에 가져갑니다.
  5. 코드를 자신의 CSS 파일의 background 속성에 붙여 넣습니다.

주요 기능

  • 시작·끝 색상과 각도를 자유롭게 조정하며 실시간 미리보기 제공
  • 대각선·가로·세로 등 자주 쓰는 4가지 프리셋 제공
  • linear-gradient(...) 한 줄 코드로 즉시 사용 가능
  • 한 번 클릭으로 클립보드 복사
  • 모든 처리는 브라우저에서 — 외부 통신 없음

활용 예시

  • 버튼 배경 — 단색보다 입체감 있는 CTA 버튼
  • 카드·섹션 배경 — 단조로운 영역에 시각적 강조
  • 히어로 섹션 — 메인 비주얼의 분위기 결정
  • 오버레이 — 이미지 위 텍스트 가독성 향상
  • 로고·일러스트 보조 — 그라데이션 텍스트로 브랜드 강조

각도 가이드

  • 0deg — 아래에서 위로
  • 90deg — 왼쪽에서 오른쪽으로
  • 180deg — 위에서 아래로 (가장 자연스러운 흐름)
  • 135deg — 좌상단에서 우하단으로 (가장 일반적)
  • 45deg — 좌하단에서 우상단으로

자주 묻는 질문

linear-gradient와 radial-gradient의 차이는?

linear-gradient는 직선 방향으로 색이 변하는 그라데이션이며, radial-gradient는 한 점에서 원형으로 퍼지는 그라데이션입니다. 본 도구는 가장 자주 사용되는 linear-gradient를 생성합니다.

색상을 3개 이상 사용하려면 어떻게 하나요?

CSS는 linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)처럼 콤마로 색을 추가하면 다중 색 그라데이션이 됩니다. 본 도구의 출력 코드를 복사한 뒤 직접 색을 추가하면 됩니다.

브라우저 호환성은 어떤가요?

linear-gradient는 Chrome, Firefox, Safari, Edge 등 모든 모던 브라우저에서 지원됩니다. IE 11 이하는 미지원이지만 현재 지원 종료된 브라우저이므로 신경 쓰지 않아도 됩니다.

그라데이션을 텍스트에 적용할 수 있나요?

가능합니다. background: linear-gradient(...); -webkit-background-clip: text; color: transparent; 패턴을 텍스트 요소에 적용하면 글자 자체에 그라데이션이 입혀집니다.