CSS 그라디언트 생성기 - 선형·방사형 그라디언트 온라인
CSS 그라디언트를 라이브 미리보기와 함께 생성. 선형·방사형 그라디언트 CSS 코드 복사 또는 Tailwind 클래스로 내보내기.
자주 묻는 질문
CSS 그라디언트란 무엇인가요?
CSS 그라디언트는 이미지 파일 없이 순수 CSS 코드만으로 두 개 이상의 색상 간에 부드러운 전환을 만드는 기능입니다. 그라디언트는 선형(직선 방향), 방사형(중심점에서 퍼져나가는), 또는 원추형(중심점 주위를 도는)이 될 수 있습니다. 가볍고 확장 가능하며 배경, 버튼, UI 요소에 완벽합니다.
선형 그라디언트와 방사형 그라디언트의 차이점은 무엇인가요?
선형 그라디언트는 지정된 각도(예: 왼쪽에서 오른쪽, 위에서 아래, 또는 대각선)를 따라 직선으로 색상이 전환됩니다. 방사형 그라디언트는 중심점에서 바깥쪽으로 색상이 전환되어 원형 또는 타원형 패턴을 만듭니다. 방향성 효과에는 선형 그라디언트를, 스포트라이트나 글로우 효과에는 방사형 그라디언트를 사용하세요.
이 그라디언트 생성기는 어떻게 사용하나요?
그라디언트 유형(선형 또는 방사형)을 선택하고, 색상 피커를 클릭하여 색상 정지점을 추가하거나 조정하고, 시각적 피커나 입력 필드를 사용하여 방향/각도를 설정하고, 실시간으로 그라디언트를 미리 보고, 복사 버튼을 사용하여 CSS 코드나 Tailwind 클래스를 복사하세요.
Tailwind CSS 출력이란 무엇이고 언제 사용해야 하나요?
Tailwind CSS는 현대 웹 개발에서 인기 있는 유틸리티 우선 CSS 프레임워크입니다. 프로젝트에서 Tailwind를 사용한다면 생성된 클래스(예: bg-gradient-to-r from-blue-500 to-purple-500)를 HTML에 직접 복사할 수 있습니다. 참고: Tailwind는 2-3개의 색상 정지점을 가진 선형 그라디언트만 지원합니다.
색상 정지점은 몇 개까지 추가할 수 있나요?
단일 그라디언트에 최대 10개의 색상 정지점을 추가할 수 있습니다. 각 정지점은 고유한 색상과 위치(0-100%)를 가질 수 있습니다. 그라디언트가 표시되려면 최소 2개의 색상 정지점이 필요합니다. 그라디언트 바의 마커를 드래그하여 위치를 조정하세요.
이 그라디언트 생성기는 안전하고 개인 정보가 보호되나요?
네. 이 도구는 클라이언트 측 JavaScript를 사용하여 100% 브라우저에서 실행됩니다. 그라디언트 데이터가 어떤 서버로도 전송되지 않습니다. 모든 생성과 코드 출력이 기기에서 로컬로 이루어지므로 독점 브랜드 색상과 기밀 디자인 작업에도 안전합니다.
코드 예제
// Create CSS gradients programmatically
function createLinearGradient(angle, colorStops) {
const stops = colorStops
.map(stop => `${stop.color} ${stop.position}%`)
.join(', ');
return `linear-gradient(${angle}deg, ${stops})`;
}
function createRadialGradient(shape, position, colorStops) {
const stops = colorStops
.map(stop => `${stop.color} ${stop.position}%`)
.join(', ');
return `radial-gradient(${shape} at ${position.x}% ${position.y}%, ${stops})`;
}
// Usage
const linear = createLinearGradient(135, [
{ color: '#667eea', position: 0 },
{ color: '#764ba2', position: 100 }
]);
console.log(linear);
// linear-gradient(135deg, #667eea 0%, #764ba2 100%)
document.body.style.background = linear;