CSS 그라데이션 생성기
CSS 그라데이션을 시각적으로 만들고 코드를 복사하세요. Linear, Radial 지원.
이 도구는?
CSS 그라디언트 생성기는 시각적 편집기와 실시간 미리보기를 통해 선형, 원형, 원뿔형 그라디언트를 생성합니다. 여러 색상 정지점을 추가하고, 각도와 위치를 조정하며, 생성된 CSS 코드를 한 번의 클릭으로 복사할 수 있습니다. 직접 CSS를 작성하지 않고도 아름다운 그라디언트 배경을 만들고 싶은 웹 디자이너, 프론트엔드 개발자를 위한 도구입니다.
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%);
프리셋
사용 방법
- 그라데이션 타입을 선택하세요: 선형(Linear) 또는 원형(Radial).
- 선형 그라데이션은 슬라이더로 각도를 조절하거나 방향 프리셋을 선택하세요.
- 색상 스톱을 추가, 삭제, 수정하세요. 각 스톱은 색상과 위치(%)를 조절할 수 있습니다.
- 실시간 미리보기에서 변경사항을 확인하세요.
- 'CSS 복사' 버튼으로 생성된 CSS 코드를 클립보드에 복사하세요.
자주 묻는 질문
CSS 그라데이션이란?
CSS 그라데이션은 두 개 이상의 색상 사이를 부드럽게 전환하는 효과입니다. 이미지 파일 없이 CSS 코드만으로 만들 수 있어 페이지 로딩 속도에 영향을 주지 않습니다.
Linear와 Radial 그라데이션의 차이는?
Linear(선형) 그라데이션은 직선 방향으로 색상이 전환됩니다. Radial(원형) 그라데이션은 중심점에서 바깥쪽으로 원형 또는 타원형으로 색상이 전환됩니다.
색상 스톱을 여러 개 사용할 수 있나요?
네! 이 생성기에서는 2~5개의 색상 스톱을 사용할 수 있습니다. 각 스톱은 색상과 위치(0%~100%)를 설정하여 그라데이션에서 색상이 나타나는 지점을 조절합니다.
-webkit- 접두사가 필요한가요?
최신 브라우저는 접두사 없이도 그라데이션을 지원합니다. 다만 오래된 Chrome, Safari, Android 브라우저와의 호환성을 위해 -webkit- 접두사를 포함하는 것이 좋습니다. 이 생성기는 두 버전 모두 제공합니다.
생성된 CSS는 어떻게 사용하나요?
CSS 코드를 복사하여 스타일시트에 붙여넣으세요. 원하는 요소의 background 속성에 적용하면 됩니다. 예: .my-element { background: linear-gradient(90deg, #ff0000, #0000ff); }
관련 도구
작동 방식
CSS 그라디언트는 두 개 이상의 색상 간 부드러운 전환을 생성하는 이미지 함수로, 이미지 파일 없이 브라우저의 2D 래스터라이저가 네이티브로 렌더링합니다. CSS `linear-gradient()` 함수는 각도로 정의된 직선을 따라 색상을 보간합니다(예: 90deg는 왼쪽에서 오른쪽). `radial-gradient()` 함수는 중심점에서 타원 또는 원형으로 바깥쪽으로 색상을 보간합니다. `conic-gradient()` 함수는 색상 휠처럼 중심점을 중심으로 색상을 회전시킵니다.
각 색상 정지점은 색상 값과 선택적 위치(백분율 또는 길이)를 지정합니다. 브라우저의 렌더링 엔진은 기본적으로 sRGB 색상 공간에서 인접한 색상 정지점 사이를 선형 보간합니다. 이 도구는 표준 CSS 구문을 생성하고 레거시 브라우저 호환성을 위해 `-webkit-` 접두사 버전도 제공합니다. 실시간 미리보기는 `<div>` 요소에 그라디언트를 렌더링하므로 웹사이트에서 실제로 어떻게 보일지 정확히 확인할 수 있습니다. 또한 단일 `background` 속성에서 쉼표로 구분된 값을 사용하여 여러 그라디언트를 겹칠 수 있습니다.