CanDoYa
KO

무료 CSS 그라데이션 생성기

브라우저에서 바로 실행됩니다. 업로드도, 회원가입도 없습니다.

유형
색상 정지점
CSS 코드
이 도구 공유하기

CSS 그라데이션 생성기란?

CSS 그라데이션 생성기는 linear-gradient(), radial-gradient(), conic-gradient() 코드를 대신 만들어주는 시각적 도구예요. 색상을 고르고 정지점 위치를 드래그하고 각도를 설정하면, 실시간 미리보기가 브라우저에 그대로 렌더링될 결과를 보여주는 동시에 바로 붙여넣을 수 있는 CSS 코드가 완성돼요. 모든 과정이 브라우저 안에서만 처리돼요.

사용 방법

  1. 1그라데이션 유형 선택하기. 선형, 방사형, 원뿔형 중에서 선택하세요. 선형은 각도 슬라이더를 보여주고, 방사형은 모양(원 또는 타원)과 위치를 추가하며, 원뿔형은 시작 각도와 위치를 가져요.
  2. 2색상 정지점 설정하기. 각 색상 견본을 클릭해 색을 고르고 슬라이더를 드래그해 정지점을 그라데이션 위에서 이동하세요. 최대 8개까지 추가하거나 2개까지 줄일 수 있어요.
  3. 3방향 조정하기. 각도 슬라이더(0~360도)를 드래그하거나 위치 키워드를 선택하세요. 변경할 때마다 미리보기가 바로 업데이트돼요.
  4. 4CSS 복사하기. 복사 버튼을 눌러 단색 대체 값이 포함된 background 선언을 가져온 다음 스타일시트에 붙여넣으세요.

이런 분께 추천

그라데이션 문법을 직접 손으로 작성하는 건 까다로워요. 각도, 정지점 순서, 퍼센트 위치가 서로 영향을 주고받고, 오타 하나로 background 전체가 조용히 깨져버릴 수 있어요. 이 생성기는 미리보기와 코드를 항상 일치시켜요. 화면에 보이는 그대로가 복사되는 CSS예요. 처리는 전부 클라이언트 측에서 이루어지므로 디자인한 내용이 어디에도 업로드되지 않아요.

자주 묻는 질문

이 CSS 그라데이션 생성기는 무료인가요?

네, 100% 무료이고 회원가입도 워터마크도 제한도 없어요. 원하는 만큼 그라데이션을 만들고 CSS를 그대로 프로젝트에 복사해서 쓰세요.

서버로 업로드되는 내용이 있나요?

아니요. 그라데이션은 순수 JavaScript로 브라우저 안에서만 생성되고 미리보기 돼요. 색상, 코드, 사용 데이터 중 어느 것도 외부로 전송되지 않아요.

선형, 방사형, 원뿔형 그라데이션의 차이는 무엇인가요?

선형 그라데이션은 지정한 각도의 직선을 따라 색을 섞어요. 방사형 그라데이션은 중심점에서 원이나 타원 모양으로 퍼져 나가요. 원뿔형 그라데이션은 색상환이나 파이 차트처럼 중심점을 기준으로 색을 회전시켜요.

CSS 그라데이션에서 색상 정지점은 어떻게 작동하나요?

각 정지점은 그라데이션 선 위 0%에서 100% 사이의 위치에 색상 하나를 짝지어요. 브라우저는 인접한 정지점 사이를 부드럽게 섞어요. 같은 위치에 정지점 두 개를 두면 부드럽게 섞이는 대신 뚜렷한 경계가 생기는데, 줄무늬나 파이 차트 효과를 만들 때 유용해요.

어떤 브라우저가 이 그라데이션을 지원하나요?

Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저가 프리픽스 없는 linear-gradient()와 radial-gradient()를 지원해요. conic-gradient()도 2020년부터 모든 곳에서 지원돼요. 복사된 코드에는 더 오래된 브라우저를 위한 단색 대체 값도 포함돼 있어요.

생성된 그라데이션을 텍스트 색상으로 쓸 수 있나요?

직접적으로는 안 돼요. 그라데이션은 색상이 아니라 이미지예요. 텍스트 요소에 background-image로 그라데이션을 적용한 다음 background-clip: text와 color: transparent를 추가하면 글자 모양을 통해 그라데이션이 보이게 돼요.

왜 그라데이션에 밴딩 현상이 생기나요?

밴딩은 멀리 떨어진 두 정지점이 비슷한 색조 구간에서 길게 섞이면서 8비트 색상 단계가 드러날 때 나타나요. 중간에 색상 정지점을 추가하거나 섞이는 구간을 짧게 하거나 색조뿐 아니라 명도도 다른 색을 선택하면 줄일 수 있어요.