입력
작업 공간 준비 중…
사용 방법
- 선형 또는 방사형을 선택하고 두 색상을 지정하세요.
- 색상 지점 위치와 선형 그라데이션의 각도를 조절하세요.
- CSS를 복사하여 요소에 background 선언을 적용하세요.
CSS 그라데이션 조절
CSS 그라데이션은 별도의 이미지 파일 대신 색상으로 배경을 만듭니다. 카드, 배너, 섹션의 크기에 맞춰 표시되며 스타일시트에서 계속 편집할 수 있습니다.
이 생성기는 두 색상에 집중합니다. 선형 방향 또는 가운데에서 퍼지는 원형 방사형 그라데이션을 선택하고, 색상 지점으로 전환의 시작과 끝을 조절하세요.
방향과 색상 지점
각도는 선형 그라데이션에 적용됩니다. 방사형은 요소 중심의 원형 그라데이션이므로 각도 조절이 없습니다.
색상 지점은 0%부터 100%까지 지정합니다. 간격을 좁히면 전환 구간이 줄고, 두 지점을 같게 하면 색상이 경계에서 바로 바뀝니다.
#2563eb → #9333ea, 135 degreesbackground: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);표시된 색상과 각도를 사용한 두 지점 선형 그라데이션입니다.
미리보기의 의미
미리보기는 생성된 CSS를 그대로 사용합니다. 실제 요소와 가로세로 비율이 다르면 특히 방사형 그라데이션의 모양이 달라질 수 있습니다.
첫 번째 지점은 두 번째 지점 뒤에 올 수 없습니다. 한 레이어에 두 색상만 생성하며, 추가 색상 지점과 레이어는 스타일시트에서 직접 작성해야 합니다.
선언 적용
복사되는 출력은 background:로 시작합니다. 원하는 선택자에 적용하고 기존의 배경 이미지, 색상 또는 축약 속성이 덮어써지는지 확인하세요.
텍스트 입력 한도는 1 MiB입니다. CSS 및 HTML 변환은 워커에서 실행되며 제한 시간은 30초입니다. 색상 도구는 sRGB를 사용하며, 생성된 스타일은 미리 보기이므로 실제 레이아웃에서 테스트해야 합니다.
자주 묻는 질문
세 번째 색상을 추가할 수 있나요?
이 작업 영역은 두 색상 지점을 지원합니다. CSS를 복사한 뒤 필요한 색상 지점을 쉼표로 구분해 직접 추가할 수 있습니다.
방사형에는 왜 각도 조절이 없나요?
중앙 원형 방사형 그라데이션은 중심에서 바깥쪽으로 퍼집니다. 각도는 선형 그라데이션에만 적용됩니다.
색상 경계를 선명하게 나눌 수 있나요?
네. 두 색상 지점을 같은 위치로 지정하면 두 색상 사이의 전환 구간이 사라집니다.
이미지 파일이 생성되나요?
아니요. CSS 복사는 background 선언을 제공합니다. 그 선언을 사용할 때 브라우저가 그라데이션을 그립니다.
실제 요소에서 다르게 보이는 이유는 무엇인가요?
요소의 크기와 비율이 그라데이션 표시에 영향을 줍니다. 미리보기 카드뿐 아니라 실제 적용할 요소에서도 확인하세요.