🌈

CSS 그라데이션 생성

선형 및 방사형 CSS 그라디언트를 시각적으로 만드세요. 색상 중지점을 추가하고, 위치를 조정하고, 각도를 설정하고, 바로 사용할 수 있는 CSS를 한 번의 클릭으로 복사하세요.

생성기 도구 로컬에서 실행 데이터 전송 없음
CSS 그라디언트선형 그라디언트방사형 그라디언트색상 중지점
그라디언트 유형
각도
색상 중지점
미리보기
CSS 출력
background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);

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

CSS 그라데이션 생성은 CSS 선형 및 방사형 그라데이션을 만들기 위한 시각적 도구입니다. 색상 중지점을 추가하고 0—00% 범위에서 위치를 설정하며, 선형 그라데이션의 각도를 선택하고 결과를 실시간으로 확인할 수 있습니다. 최종 CSS 속성은 어떤 스타일시트에든 붙여넣을 수 있습니다.

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

  1. 선형 또는 방사형 그라데이션 유형을 선택하세요.
  2. 선형 그라데이션의 경우 슬라이더로 각도를 설정하세요.
  3. 색상 선택기를 클릭하고 위치를 조정하여 기본 색상 중지점을 편집하세요.
  4. 필요한 경우 "색상 중지점 추가" 버튼으로 색상 중지점을 더 추가하세요.
  5. "CSS 복사"를 클릭하여 그라데이션 속성을 클립보드에 복사하세요.

관련 도구

🎨
이미지 팔레트 추출
이미지에서 주요 HEX 색상으로 구성된 간결한 팔레트를 추출하세요
 ☀️
이미지 밝기 대비
즉시 미리보기로 사진의 밝기와 대비를 조정하세요
 🌓
듀오톤 이미지 변환
이미지의 그림자와 하이라이트를 두 가지 사용자 지정 색상에 매핑하세요
CSS 그라데이션 구문 ▾
예시
입력 선형, 135°, 중지점 1: #7c6af7 0%, 중지점 2: #06b6d4 100%
출력 background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);
일반적인 사용 사례
  • 랜딩 페이지와 UI 구성 요소의 배경 그라디언트를 생성하세요
  • 히어로 섹션용 그라디언트 오버레이를 만드세요
  • 차트나 구분선용 색상 중지점 패턴을 만드세요
  • 디자인 도구로 옮기기 전에 그라디언트 아이디어를 프로토타입으로 만들어 보세요
자주 묻는 질문
어떤 그라디언트 유형이 지원되나요?

사용자 지정 각도(0—60°)의 선형 그라디언트와 원형 방사형 그라디언트가 모두 지원됩니다.

색상 중지점을 두 개 이상 추가할 수 있나요?

예. "색상 중지점 추가"를 클릭하여 필요한 만큼 중지점을 추가하세요. 각 중지점은 독립적인 색상과 위치를 가집니다.

선형 그라디언트의 방향은 어떻게 제어하나요?

각도 슬라이더를 사용하세요. 0°는 위에서 아래, 90°는 왼쪽에서 오른쪽, 135°는 대각선 방향입니다.

출력은 브라우저 간 호환되나요?

Yes. The tool outputs standard CSS using the linear-gradient() and radial-gradient() functions which are supported by all modern browsers.