CSS 그라데이션 생성기

사용 방법

1. 프리셋이나 기본 그라데이션에서 시작하세요.
2. 막대를 클릭해 색상을 추가하고, 정지점을 드래그해 옮기세요.
3. 선형, 원형, 원뿔형 중에서 고르고 각도나 중심을 조정하세요.
4. CSS 선언이나 Tailwind 클래스를 복사하세요.

옵션 설명

선형

색이 직선을 따라 바뀌어요. 0°는 위쪽, 90°는 오른쪽, 180°는 아래쪽 방향이에요.

원형

색이 중심점에서 원이나 요소에 맞는 타원 모양으로 퍼져 나가요.

원뿔형

색상환이나 원그래프처럼 색이 중심점을 빙 둘러 회전해요.

반복

패턴을 반복해요. 정지점을 0%에서 10%처럼 짧은 범위 안에 두면 줄무늬를 만들 수 있어요.

생성되는 코드의 모습

같은 두 색을 각 유형으로 작성한 예예요. 색 정지점(stop)은 항상 퍼센트 위치로 써요.

linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)

Tailwind 버전은 같은 값을 임의 값 클래스로 감싸요. 공백은 밑줄로 바뀌고 쉼표 뒤 공백은 제거돼요.

bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]

마지막 CSS 줄에서는 패턴이 요소의 10%마다 반복되어 얇은 줄무늬가 돼요. 원뿔형 그라디언트에서 각도는 회전이 시작되는 위치이고, 원형 그라디언트에서 두 퍼센트 값은 중심 위치예요.

자주 묻는 질문

개인정보 보호

이 도구는 전적으로 브라우저에서 실행돼요. 파일과 텍스트는 기기에서 처리되며 서버로 업로드되지 않아요.