CSS 그라디언트 생성기
시각적 편집기로 아름다운 CSS 그라디언트를 만듭니다. 선형, 방사형, 원뿔형 그라디언트를 지원합니다.
100% Client-Side
90deg
0deg360deg
0%
100%
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
개요 CSS 그라디언트 생성기?
CSS 그라데이션 코드를 시각적으로 만드는 도구입니다. 선형, 원형 그라데이션의 색상과 방향을 조절하고 바로 사용할 수 있는 CSS 코드를 생성합니다.
사용 방법
- 그라데이션 유형(선형/원형)을 선택하세요
- 색상 포인트를 추가하고 위치를 조절하세요
- 방향이나 각도를 설정하세요
- 생성된 CSS 코드를 복사하세요
공식
linear-gradient(direction, color1, color2, ...)
자주 묻는 질문
- 선형과 원형 그라데이션의 차이는?
- 선형(linear)은 직선 방향으로, 원형(radial)은 중심에서 바깥으로 퍼지는 그라데이션입니다.
- 3가지 이상 색상도 가능한가요?
- 네, 원하는 만큼 색상 정지점을 추가할 수 있습니다. 각 색상의 위치를 백분율로 지정할 수 있습니다.
- 그라데이션이 모든 브라우저에서 작동하나요?
- 최신 브라우저에서 모두 지원됩니다. IE 9 이하에서는 fallback 배경색을 함께 지정하는 것이 좋습니다.