CSS 그러데이션 생성기

사용 방법

1. "종류"에서 선형(linear), 원형(radial), 원뿔형(conic)을 고릅니다. 프리셋에서 시작해도 됩니다.
2. 선형은 슬라이더, 숫자, 방향 버튼으로 각도를 정하고, 원형은 모양과 중심 위치를, 원뿔형은 시작 각도와 중심 위치를 정합니다.
3. 색 지점마다 색(선택기 또는 HEX, rgb(), hsl()), 불투명도, 위치(%)를 입력합니다. "지점 추가"로 최대 8개까지 늘릴 수 있습니다.
4. 미리 보기를 확인하고 CSS(background 또는 background-image)나 Tailwind CSS 클래스를 복사합니다.

주의 사항

• 색 지점은 2~8개입니다. 한 지점에 위치 두 개를 쓰는 방식이나 색 중간점(힌트) 지정은 지원하지 않습니다.
• 출력에서는 지점을 위치가 작은 순으로 정렬합니다. 같은 위치의 지점은 목록 순서를 따릅니다.
• 반투명한 색은 #rrggbbaa(8자리 HEX)로 출력합니다. 현재 주요 브라우저는 지원하지만 아주 오래된 브라우저에서는 표시되지 않을 수 있습니다.
• 원형 크기 키워드(closest-side 등), 반복 그러데이션(repeating-), 여러 그러데이션 겹치기는 만들 수 없습니다.
• Tailwind 출력은 v3.0 이상과 v4용 임의 값(arbitrary value) 클래스입니다. from-, via-, to- 유틸리티로는 바꾸지 않습니다.

계산·변환 방식

선형은 linear-gradient(각도, 색 위치, …), 원형은 radial-gradient(모양 at 위치, …), 원뿔형은 conic-gradient(from 각도 at 위치, …) 형태로 출력합니다.

각도는 0~360의 정수로, 위치는 0~100%(소수 첫째 자리까지)로 반올림합니다. CSS에서 0도는 위쪽이고 시계 방향으로 커집니다.

Tailwind 클래스는 쉼표 뒤 공백을 없애고 나머지 공백을 _로 바꿔 bg-[…] 형태로 만듭니다. 값에 _나 따옴표 등이 들어 있으면 출력하지 않습니다.