그라디언트 생성기
모든 색상 도구
무료
드래그 가능한 다중 정류장 컨트롤과 큐레이션된 프리셋으로 선형, 방사형 및 원형 CSS 그라디언트를 처음부터 만드세요. 바로 붙여넣을 수 있는 CSS를 즉시 복사하세요.
라이브 미리보기
프리셋
그라디언트 유형
각도
°
색상 정류장
핸들을 드래그하여 정류장을 이동하거나 막대를 클릭하여 추가하세요. 정류장을 선택하여 색상을 편집하세요.
선택된 정류장
%
CSS
background: -;
모든 계산은 브라우저에서 실시간으로 이루어집니다: 가입 없음, 완전 무료.
그라디언트 생성기 소개
그라디언트 생성기(Gradient Generator)는 처음부터 커스텀 CSS 그라디언트를 만듭니다. 선형, 방사형 또는 원뿔형 유형을 고르고 각도를 설정한 뒤 다중 정지점 편집기로 혼합을 다듬으세요. 핸들을 드래그해 정지점을 이동하고, 막대를 클릭해 새 정지점을 추가하고, 피커로 어떤 정지점이든 재색상하면 미리보기가 작업하는 동안 실시간으로 업데이트됩니다.
백지에서 시작하고 싶지 않을 때는 엄선된 프리셋이 훌륭한 출발점이 되며, 무작위, 반전, 45° 회전 같은 원클릭 동작이 탐색을 빠르게 해줍니다. 생성된 CSS는 항상 표시되고 미리보기와 동기화되어 있으므로 복사하는 것이 바로 눈으로 본 그대로입니다.
모든 계산은 무료로 브라우저에서 실시간으로 이루어집니다. 완성된 CSS 규칙이나 background 값만 복사해 스타일시트, 버튼 스타일, 히어로 섹션에 붙여넣으세요. 배경, 오버레이, UI 강조를 위한 간단한 CSS 그라디언트 생성기입니다.
그라디언트 생성기 사용 방법
- 그라디언트 유형을 선택하세요: 선형, 방사형 또는 원뿔형.
- 프리셋에서 시작하거나 "무작위"를 클릭해 즉시 출발점을 얻으세요.
- 정지점 핸들을 드래그해 색상을 배치하고, 막대를 클릭해 정지점을 추가하고, 각 정지점의 색상을 편집하세요.
- 각도를 조정하거나 "반전"과 "45° 회전"으로 혼합 방향을 바꾸세요.
- CSS 규칙이나 background 값을 복사해 프로젝트에 붙여넣으세요.
자주 묻는 질문
네. 이 도구는 완전히 클라이언트 측에서 실행되며, 회원가입도, 크레딧도, 만들거나 복사할 수 있는 그라디언트 개수 제한도 없습니다.
선형 그라디언트는 선택한 각도로 직선을 따라 색상을 혼합합니다. 방사형 그라디언트는 중심점에서 원형으로 바깥으로 퍼져 나갑니다. 원뿔형 그라디언트는 파이 차트처럼 중심점을 기준으로 색상을 회전시키며, 컬러 휠이나 진행 링에 적합합니다.
그라디언트에는 최소 두 개의 정지점이 필요하며, 막대를 계속 클릭해 더 추가할 수 있습니다. 각 정지점은 고유한 색상과 드래그 가능한 위치를 가지므로 복잡한 다중 색상 혼합도 쉽게 만들 수 있습니다.
선형과 방사형 그라디언트는 어디서나 지원됩니다. 원뿔형 그라디언트는 모든 최신 브라우저에서 지원되지만 아주 오래된 브라우저에서는 지원되지 않으므로, 구형 버전을 지원해야 한다면 대체용 background-color를 제공하세요.
네. 함께 제공되는 이미지 기반 그라디언트 생성기를 사용하세요. 업로드한 사진의 주요 색상을 추출해 편집 가능한 그라디언트 정지점으로 바꿔줍니다. 이 도구는 처음부터 만드는 방식의 짝입니다.
인기 검색어
그라데이션 생성기
css 그라데이션 메이커
linear gradient 생성기
radial gradient 메이커
conic gradient css
무료 그라데이션 생성기
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.