🌈

CSS 그라데이션 생성

CSS 선형 및 방사형 그라데이션을 만들고 미리 봅니다. 바로 사용할 수 있는 CSS 코드를 복사합니다.

디자인 도구 로컬에서 실행 데이터 전송 없음
CSS 그라디언트 선형 방사형 디자인
그라디언트 유형
방향
●
색상 중지점
CSS 출력

CSS 그라데이션 생성이란 무엇인가요?

CSS 선형 및 방사형 그라데이션을 만들고 미리 보세요. 색상 중지점을 추가하고 방향을 선택한 뒤 바로 사용할 수 있는 CSS 코드를 즉시 복사하세요.

그라디언트 생성기 사용 방법

  1. 선형 또는 방사형 그라디언트 중 선택하세요.
  2. 색상 혼합이 원하는 대로 보일 때까지 색상 스톱을 추가하거나 조정하세요.
  3. 실시간 미리보기에서 각도, 위치 또는 확산 값을 미세 조정하세요.
  4. 프로젝트에 사용할 준비가 되면 생성된 CSS를 복사하세요.

관련 도구

🎨
색상 팔레트 생성
보색, 유사색, 삼색 팔레트를 생성하세요
 🎨
색상 선택기
HEX, RGB, HSL, CMYK 간에 색상을 변환하세요
 ⚖️
WCAG 명도 대비 검사
접근성을 위해 WCAG AA 및 AAA 색상 대비율을 확인하세요
CSS 그라디언트 이해하기 ▾
예시
입력 선형, 90°, 스톱: #6366F1 → #8B5CF6
출력 background: linear-gradient(90deg, #6366F1, #8B5CF6);
일반적인 사용 사례
  • 마케팅 페이지용 히어로 배경 그라디언트 만들기
  • CSS 파일을 편집하기 전에 각도와 스톱 조정 테스트하기
  • 세련된 버튼 또는 카드 배경 생성하기
  • 수동 변환 없이 개발자와 정확한 그라디언트 CSS 공유하기
자주 묻는 질문
-webkit-linear-gradient 같은 벤더 프리픽스가 필요한가요?

아니요 — 모든 최신 브라우저(Chrome, Firefox, Safari, Edge)는 프리픽스 없는 CSS 그라디언트를 지원합니다. 벤더 프리픽스는 매우 오래된 브라우저(IE 9 이하)에만 필요합니다.

투명한 색상 스톱을 사용할 수 있나요?

예 — 알파 값이 0인 rgba() 또는 hsla() 색상을 사용하여 투명하게 페이드할 수 있습니다. 예: rgba(99, 102, 241, 0)은 인디고 색상을 투명하게 페이드합니다.

이 그라디언트를 텍스트에 사용할 수 있나요?

예 — 그라디언트 값을 복사한 후 CSS 속성과 함께 사용하세요: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

색상 스톱은 최대 몇 개까지 사용할 수 있나요?

이 도구는 최대 6개의 색상 스톱을 지원합니다. CSS 자체에는 엄격한 제한이 없으며 브라우저는 수십 개의 스톱이 있는 그라디언트를 지원하지만 성능은 달라질 수 있습니다.