도구 소개
CSS 그라데이션 생성기는 CSS로 선형 또는 방사형 그라데이션 배경을 만듭니다. 각 색상 정지점의 색상과 백분율 위치를 개별적으로 지정할 수 있으며, 정지점을 추가하거나 삭제하여 색상 전환의 변화를 확인할 수 있습니다.
사용 방법
- 선형 또는 방사형 그라데이션을 선택하세요.
- 색상 정지점 2~6개와 0~100% 범위의 위치를 설정하세요.
- 선형 그라데이션은 0~360°로 각도를 조절할 수 있습니다. 슬라이더와 숫자 입력이 동기화됩니다.
- 실시간 미리보기를 확인하고 CSS를 복사하세요. ‘초기화’나 ‘예제 불러오기’로 배색을 비교할 수 있습니다.
사용 예제
- 0%에 빨강, 100%에 파랑을 두면 기본적인 두 색상 그라데이션이 됩니다.
- 50% 위치에 세 번째 색상을 추가하면 중간 전환이 달라집니다.
- 색상 정지점을 같은 위치에 두면 색상 사이에 뚜렷한 경계를 만들 수 있습니다.
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
background: radial-gradient(circle, #ffffff 0%, #000000 100%);작동 원리 및 CSS 설명
linear-gradient()는 지정한 방향을 따라 색상 정지점 사이를 보간하고, radial-gradient()는 중심에서 바깥쪽으로 전환합니다. 색상은 불투명 HEX 규칙으로 검증하고 위치를 백분율 범위로 제한한 뒤 유효한 background 선언을 생성합니다.
주요 용도
- 웹페이지 배경과 버튼 배색을 만듭니다.
- 여러 색상으로 구성된 그라데이션의 방향을 빠르게 비교합니다.
- 색상 정지점의 위치가 전환에 미치는 영향을 배웁니다.
개인정보 안내
모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.
FAQ
linear-gradient와 radial-gradient는 어떻게 다른가요?
선형 그라데이션은 직선 방향으로 전환됩니다. 방사형 그라데이션은 중심에서 바깥으로 전환되며 주로 원이나 타원 모양입니다.
CSS 그라데이션은 이미지인가요?
브라우저가 생성하는 CSS 이미지입니다. 이미지 파일을 다운로드하거나 온라인 생성 서비스를 이용할 필요가 없습니다.
선형 그라데이션의 방향은 어떻게 바꾸나요?
각도를 변경하면 됩니다. 0deg는 위쪽, 90deg는 오른쪽, 180deg는 아래쪽을 향합니다.
색상을 세 개보다 많이 사용할 수 있나요?
네. 색상 정지점을 2~6개까지 사용하고 각각의 색상과 위치를 지정할 수 있습니다.