🌈 CSS 그라디언트 생성기

소개

코드를 한 줄도 쓰지 않고 시각적으로 CSS 그라디언트를 만들 수 있는 툴입니다. 선형(linear-gradient)과 원형(radial-gradient) 중 선택하고, 각도나 모양을 설정하고, 색상 피커와 위치 입력으로 색상 포인트를 자유롭게 조정하면 실시간으로 결과를 확인할 수 있습니다. 선셋, 오션, 오로라, 네온 등 8가지 내장 프리셋으로 빠르게 시작할 수도 있습니다. 모든 처리가 브라우저 내 순수 JavaScript로만 이루어지므로 색상 정보나 디자인 데이터가 외부로 전송되지 않으며, 서버·계정·추적이 일절 없습니다.

사용 방법

1. Gradient type 드롭다운에서 선형(Linear) 또는 원형(Radial)을 선택하세요.
2. 선형 그라디언트는 슬라이더나 숫자 입력으로 각도(0–360°)를 설정하고, 원형 그라디언트는 타원(Ellipse) 또는 원(Circle) 모양을 선택하세요.
3. 색상 포인트 패널에서 색상 스와치를 클릭해 컬러 피커를 열고, 위치(%) 입력값을 조정해 각 포인트를 원하는 위치에 배치하세요.
4. + 포인트 추가 버튼으로 가장 큰 간격에 새 색상 포인트를 자동 삽입하거나, ✕ 버튼으로 포인트를 삭제할 수 있습니다(최소 2개 필요).
5. CSS 복사 버튼을 클릭해 완성된 background: linear-gradient(…) 또는 radial-gradient(…) 선언을 클립보드에 복사하고 스타일시트에 바로 붙여넣으세요.

자주 묻는 질문

CSS 그라디언트 생성기는 무료인가요?

네, 완전 무료입니다. 구독·계정·숨겨진 사용 제한이 없으며, 페이지를 열기만 하면 바로 사용할 수 있습니다.

인터넷 없이 오프라인에서도 사용할 수 있나요?

네. 페이지를 한 번 불러온 뒤에는 인터넷 없이 완전히 동작합니다. 외부 API 호출, CDN 의존성, 서버 요청이 전혀 없어 비행기 안이나 네트워크 제한 환경에서도 안전하게 사용할 수 있습니다.

제가 만든 색상이나 디자인 데이터가 서버로 전송되나요?

아니요. 그라디언트 생성과 미리보기 렌더링은 모두 브라우저 내 JavaScript로만 이루어집니다. 색상 선택 내역은 브라우저의 localStorage에만 저장되며, 외부로 전송되는 데이터는 전혀 없습니다.

선형 그라디언트와 원형 그라디언트의 차이가 뭔가요?

선형 그라디언트(linear-gradient)는 지정한 각도(예: 135deg)를 따라 직선으로 색상을 전환합니다. 원형 그라디언트(radial-gradient)는 중심점에서 타원 또는 원 형태로 색상이 방사됩니다. 둘 다 모든 최신 브라우저에서 동작하는 표준 CSS를 출력합니다.

색상 포인트를 몇 개까지 추가할 수 있나요?

내장된 제한이 없어 원하는 만큼 색상 포인트를 추가할 수 있습니다(최소 2개). 새 포인트는 그라디언트의 가장 넓은 간격에 자동 배치되고, 해당 위치의 보간된 색상이 미리 채워져 자연스러운 시작점을 제공합니다.