CSS 그라데이션 생성기
여러 색상 정지점으로 선형, 방사형, 원뿔형 CSS 그라데이션을 만들고 코드를 복사하세요.
미리보기
CSS 출력
background: —;
모든 작업이 브라우저에서 실행됩니다 — 업로드도, 가입도 필요 없습니다.
그라데이션 유형
deg
deg
색상 정지점
막대를 클릭해 정지점을 추가하고, 드래그해 이동하세요
선택한 정지점
정지점 색상
100%
%
프리셋
CSS 그라데이션 생성기 소개
CSS 그라디언트 생성기는 선형, 방사형, 원뿔형 그라디언트를 완전한 시각적 제어로 만들어 줍니다. 그라디언트 바를 클릭해 색상 정지점을 추가하고, 드래그해 위치를 옮기며, 각 정지점마다 색상, 불투명도, 위치를 지정할 수 있습니다. 선형 그라디언트에는 각도 조절이, 방사형에는 모양(원 또는 타원)과 위치가, 원뿔형에는 시작 각도가 주어집니다.
실시간 미리보기는 브라우저가 실제로 렌더링할 결과를 그대로 보여 주며, 무작위 생성 버튼과 엄선된 프리셋들은 빈 캔버스 대신 시작점이 필요할 때 유용합니다. 정지점은 자유롭게 추가하고 제거할 수 있으며, 그라디언트에는 최소 두 개만 있으면 됩니다.
원하는 결과가 나오면 그라디언트 값만 복사하거나 완전한 CSS 규칙을 복사하세요. 이 생성기는 업로드나 가입 없이 전적으로 브라우저에서 실행되므로, 버튼, 히어로 배경, 테두리, 텍스트 효과를 위한 손쉬운 동반자가 되어 줍니다.
CSS 그라데이션 생성기 사용 방법
- 그라디언트 유형을 선택합니다: 선형, 방사형 또는 원뿔형.
- 각도(선형), 모양과 위치(방사형), 또는 시작 각도(원뿔형)를 설정합니다.
- 그라디언트 바를 클릭해 색상 정지점을 추가하고 드래그로 위치를 조정합니다.
- 각 정지점에 색상, 불투명도, 정확한 위치를 지정합니다.
- 빠른 영감을 얻으려면 프리셋이나 무작위 생성 버튼을 사용합니다.
- 그라디언트 값이나 전체 CSS 규칙을 복사합니다.
자주 묻는 질문
선형 그라디언트는 특정 각도의 직선을 따라 색을 혼합합니다. 방사형 그라디언트는 중심점에서 원이나 타원 모양으로 바깥을 향해 퍼져 나갑니다. 원뿔형 그라디언트는 중심점을 축으로 색이 회전하듯 펼쳐지며, 파이 차트나 색상환 뒤에 있는 방식입니다.
최소 두 개이며 실질적인 상한선은 없습니다. 두세 개의 정지점이면 깔끔한 배경을 만들 수 있고, 정지점을 촘촘히 배치하면 뚜렷한 색상 띠가 생기는데, 이것이 줄무늬나 구획 효과를 만드는 방법입니다.
네, 각 정지점마다 개별 불투명도 조절이 있습니다. 불투명도 0%인 정지점은 그라디언트를 서서히 사라지게 만드는데, 이는 색조 오버레이를 사진에 자연스럽게 겹치거나 히어로 섹션을 페이지 배경으로 서서히 녹여 내는 표준적인 방법입니다.
직접적으로는 불가능합니다. 브라우저는 그라디언트 값 사이를 전환(transition)할 수 없기 때문입니다. 흔히 쓰는 방법은 과도하게 큰 그라디언트 위에서 background-position을 애니메이션하거나, 커스텀 속성으로 원뿔형 그라디언트를 회전시키거나, 두 개의 레이어를 겹쳐 크로스페이드하는 것입니다.
네, 무료이고 제한이 없습니다. 완전히 브라우저 안에서 실행되므로 디자인한 내용이 저장되거나 전송되지 않습니다.
인기 검색어
css 그라데이션 생성기
linear gradient css 생성기
radial gradient css
conic gradient css
css 배경 그라데이션 메이커
그라데이션 색상 정지점 도구
css 그라데이션 각도 선택기
온라인 그라데이션 생성기
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.