시각적 편집기로 선형, 방사형, 원뿔형 그라데이션을 만듭니다. 여러 색상 정지점을 추가하고 즉시 CSS 코드를 생성합니다.
그라디언트 유형 버튼에서 선형, 방사형 또는 원뿔형을 선택합니다. 실시간 미리보기가 즉시 업데이트됩니다.
색상 선택기와 위치 슬라이더를 사용하여 색상을 정의합니다. '정지점 추가'로 색상을 더 추가하거나 휴지통 아이콘으로 제거할 수 있습니다. 위/아래 화살표로 정지점을 재배열합니다.
선형 및 원뿔형 그라디언트의 경우 각도 슬라이더(0°~360°)를 드래그하여 그라디언트 방향을 제어합니다. 방사형 그라디언트는 각도를 사용하지 않습니다.
'CSS 복사'를 클릭하여 background 속성을 클립보드에 복사하거나, 그라디언트를 SVG 파일로 내보냅니다. 공유 버튼을 사용하여 그라디언트를 재현하는 링크를 보낼 수도 있습니다.
'무작위'를 클릭하여 무작위 각도의 2색 그라디언트를 생성하거나, '지우기'로 모든 것을 기본 설정으로 초기화합니다.
각 색상 정지점은 0%에서 100%까지의 색상과 위치를 정의합니다. 브라우저는 CSS 그라디언트 사양에 따라 인접한 정지점 사이의 부드러운 전환을 계산합니다. 복잡한 다색 효과를 만들기 위해 필요한 만큼 정지점을 추가할 수 있습니다.
도구는 선택한 각도로 CSS linear-gradient()를 생성합니다. 색상이 시작점에서 끝점까지 직선을 따라 혼합됩니다. 각도를 변경하면 그라디언트의 방향이 회전합니다.
방사형 그라디언트는 radial-gradient(circle)를 사용하여 중심에서 바깥쪽으로 원형 색상 전환을 생성합니다. 원뿔형 그라디언트는 conic-gradient()를 사용하여 설정한 각도에서 시작하여 중심점 주위로 색상을 회전시킵니다 — 원형 차트, 색상환 및 장식 효과에 유용합니다.
SVG로 내보낼 때, 도구는 색상 정지점을 SVG 그라디언트 요소(linearGradient 또는 radialGradient)로 변환하고 디자인 도구에서 사용하거나 웹 페이지에 삽입할 수 있는 독립형 SVG 파일로 래핑합니다.
그라디언트 유형, 각도 및 색상 정지점이 페이지 URL에 인코딩됩니다. 이 URL을 공유하면 누구나 수동으로 다시 만들지 않고도 브라우저에서 정확히 같은 그라디언트를 열 수 있습니다.
세 가지 유형을 만들 수 있습니다: 직선을 따라 색상을 혼합하는 선형 그라디언트, 중심점에서 원형으로 바깥쪽으로 퍼지는 방사형 그라디언트, 색상환처럼 중심점 주위로 색상을 회전시키는 원뿔형 그라디언트입니다.
저장된 프리셋은(는) 서포터 전용 기능입니다.
도구 기록은(는) 서포터 전용 기능입니다.
도구 메모은(는) 서포터 전용 기능입니다.
