CSS 그라데이션 생성기

사용 방법

1. 페이지를 열면 그라데이션이 이미 화면에 있습니다. 첫 결과에는 클릭이 필요 없습니다.
2. 종류를 고르세요. “선형”은 각도를 따라가고, “원형”은 원에서 퍼지며, “원뿔형”은 중심 주위를 휩쓸어 갑니다. 선형과 원뿔형은 슬라이더로 각도를 바꿀 수 있습니다.
3. 견본으로 색상을 정하고 각 위치를 0–100%로 드래그하세요. 여러 정지점이 필요하면 “+ 색상 추가”로 더하고 두 개까지 줄일 수 있습니다.
4. CSS가 아래에서 실시간 갱신됩니다. 원클릭으로 복사해 CSS를 받는 곳 어디에나 붙여 넣으세요.

범위, 제한 및 자주 묻는 질문

• 불투명한 색만 지원합니다. 견본은 브라우저 색상 선택기라 알파를 보여 주지 않습니다. 투명도가 필요하면 색상을 알파 형태로 변환한 뒤 다시 오세요.
• 표준 세그먼트 하나만 만듭니다. 선형, 원형, 원뿔형이며 -webkit- 접두사, 레이어/다중 배경 기법, 원형 크기나 중심 위치 지정은 없습니다.
• 정지점은 추가한 순서를 유지합니다. 자동 정렬하지 않으므로 위치가 순서를 벗어나면 의도적으로 급격한 경계가 생깁니다.
• 정지점은 2–8개입니다. 하나로 줄이면 그라데이션을 꾸미지 않고 중단하며 안내를 표시합니다.
• 프리셋 라이브러리, 전체 페이지 배경 적용, 그라데이션을 담은 공유 링크는 없습니다. 공유 버튼은 페이지 URL만 공유하며 아무것도 업로드, 저장, URL 기록되지 않습니다.
• 원형 그라데이션에는 각도가 의미 없으므로 각도 컨트롤이 숨고 생성 코드에도 각도가 없습니다.