CSS 그라데이션 생성기
아름다운 CSS 그라데이션을 시각적으로 생성합니다. 선형, 원형, 원뿔형 그라데이션 유형과 여러 색상 정지점을 지원합니다.
그라데이션 유형
각도135deg
색상 정지점
%
%
CSS 코드
온라인으로 CSS 그라데이션을 만드는 방법
- 1.그라데이션 유형 선택: 선형, 원형, 또는 원뿔형.
- 2.슬라이더로 각도를 조정 (선형/원뿔형 그라데이션용).
- 3.색상 정지점을 추가, 제거 또는 수정. 색상 값과 위치 퍼센트를 설정.
- 4.프리셋으로 빠르게 시작하거나 처음부터 그라데이션을 만드세요. CSS 복사를 클릭하여 프로젝트에서 사용.
자주 묻는 질문
선형, 원형, 원뿔형 그라데이션의 차이점은?
선형 그라데이션은 지정된 각도의 직선을 따라 색상이 전환됩니다. 원형 그라데이션은 중심점에서 원형 또는 타원형으로 바깥으로 방사됩니다. 원뿔형 그라데이션은 색상환처럼 중심점 주위로 색상이 회전합니다.
색상 정지점을 몇 개까지 추가할 수 있나요?
필요한 만큼 색상 정지점을 추가할 수 있습니다. 각 정지점에는 색상과 위치 퍼센트(0-100%)가 있습니다. 그라데이션을 만들려면 최소 2개의 색상 정지점이 필요합니다.
이 그라데이션은 모든 브라우저에서 사용할 수 있나요?
네. 표준 구문(linear-gradient, radial-gradient, conic-gradient)의 CSS 그라데이션은 모든 최신 브라우저에서 지원됩니다. 원뿔형 그라데이션은 매우 오래된 브라우저에서는 작동하지 않을 수 있습니다.
웹사이트에 그라데이션을 어떻게 추가하나요?
생성된 CSS 코드를 복사하여 요소의 스타일에 추가하세요. CSS의 background 속성으로 사용할 수 있습니다. 예: .my-element { background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%); }