방사형 그라디언트 생성기
원형·타원형 CSS 방사형 그라디언트를 실시간으로 만들어보세요
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
원형 또는 타원형 방사형 그라디언트를 만들고 색상 정지점(최대 5개), 시작 위치, 형태를 조절하면서 결과를 바로 확인할 수 있는 도구입니다. 웹 배경, 버튼, 카드 디자인에 쓸 CSS 코드가 필요한 디자이너와 프론트엔드 개발자에게 유용합니다. 모든 계산은 브라우저 안에서 즉시 처리되며 서버로 전송되는 데이터는 없습니다.
사용 방법
- 형태를 원형 또는 타원형 중에서 선택합니다
- 3x3 위치 그리드에서 그라디언트의 시작 지점을 클릭합니다
- 색상 정지점의 색상과 위치(%)를 조절하고 필요하면 정지점을 추가·삭제합니다
- 미리보기로 결과를 확인한 뒤 생성된 CSS 코드를 복사합니다
자주 묻는 질문
- 색상 정지점은 몇 개까지 추가할 수 있나요?
- 최소 2개에서 최대 5개까지 추가할 수 있으며, 각 정지점의 색상과 위치를 개별적으로 조절할 수 있습니다.
- 생성된 CSS는 어떻게 사용하나요?
- 복사 버튼을 눌러 background 속성으로 바로 붙여넣을 수 있는 radial-gradient CSS 코드를 얻을 수 있습니다.
- 위치는 어떻게 지정되나요?
- 3x3 그리드에서 top left, center, bottom right 등 9가지 키워드 위치 중 하나를 클릭해 선택합니다.