CSS 그라디언트 생성기

두 개 이상의 색상 정지점과 위치를 정해 CSS 선형 그라디언트를 만듭니다. 방향을 바꾸며 실제 배경 미리보기를 확인하고 생성된 background-image 선언을 복사해 웹페이지 스타일에 사용할 수 있습니다.

색상 정지점·방향·코드 미리보기

두 개 이상의 색상 정지점과 위치를 정해 CSS 선형 그라디언트를 만듭니다. 방향을 바꾸며 실제 배경 미리보기를 확인하고 생성된 background-image 선언을 복사해 웹페이지 스타일에 사용할 수 있습니다.

정지점 순서와 같은 위치의 색은 어떻게 처리하나요?

CSS linear-gradient의 deg 방향과 색상 정지점을 생성합니다. 정지점은 위치순으로 정렬하며 같은 위치의 색은 경계가 뚜렷하게 바뀝니다.

원형 그라디언트나 이미지 파일도 만들 수 있나요?

2~8개의 불투명 HEX 색을 사용합니다. 원형·원뿔 그라디언트와 이미지 다운로드는 제공하지 않으며 브라우저 미리보기는 CSS 코드와 같은 선언을 사용합니다.

사용 방법

1. 입력과 선택

   정지점마다 HEX 색상과 0~100% 위치를 입력합니다. 색상 추가·삭제와 각도 입력으로 그라디언트를 조정합니다.

2. 결과와 처리 기준

   CSS linear-gradient의 deg 방향과 색상 정지점을 생성합니다. 정지점은 위치순으로 정렬하며 같은 위치의 색은 경계가 뚜렷하게 바뀝니다.

3. 저장과 확인할 범위

   2~8개의 불투명 HEX 색을 사용합니다. 원형·원뿔 그라디언트와 이미지 다운로드는 제공하지 않으며 브라우저 미리보기는 CSS 코드와 같은 선언을 사용합니다.

자주 묻는 질문

그라디언트 색과 방향을 어떻게 바꾸나요?

정지점마다 HEX 색상과 0~100% 위치를 입력합니다. 색상 추가·삭제와 각도 입력으로 그라디언트를 조정합니다.

정지점 순서와 같은 위치의 색은 어떻게 처리하나요?

CSS linear-gradient의 deg 방향과 색상 정지점을 생성합니다. 정지점은 위치순으로 정렬하며 같은 위치의 색은 경계가 뚜렷하게 바뀝니다.

원형 그라디언트나 이미지 파일도 만들 수 있나요?

2~8개의 불투명 HEX 색을 사용합니다. 원형·원뿔 그라디언트와 이미지 다운로드는 제공하지 않으며 브라우저 미리보기는 CSS 코드와 같은 선언을 사용합니다.

파일과 입력 내용이 서버나 주소에 남나요?

파일과 입력 내용은 브라우저 안에서 처리하며 서버·주소·브라우저 저장소에 기록하지 않습니다. 복사와 파일 저장은 직접 버튼을 누를 때만 수행합니다. 새로고침하면 작업 내용이 지워집니다.