빠른 사용법
세 단계로 확인합니다.
- 1두 HEX 색상을 선택합니다
시작과 끝 색상을 직접 고르거나 랜딩·로즈·민트 프리셋을 적용합니다.
- 20~360도 각도를 조정합니다
선형 gradient 방향을 숫자로 정하고 crypto 기반 무작위 조합도 비교합니다.
- 3배경 위 콘텐츠를 검수합니다
복사한 CSS에서 텍스트 대비·banding·dark mode·reduced motion 상태를 확인합니다.
결과 읽기
gradient는 두 끝점뿐 아니라 중간 모든 위치의 대비를 확인해야 합니다.
단색 두 개가 각각 통과해도 중간 혼합색 위 텍스트 대비가 낮아질 수 있으므로 실제 크기와 배치에서 가장 불리한 영역을 봐야 합니다.ANGLE방향
CSS 0deg는 위쪽, 90deg는 오른쪽 방향으로 진행합니다.
STOPS두 stop
현재 도구는 0%와 100% 두 색상만 생성해 예측 가능한 초안을 만듭니다.
CONTRAST영역별 대비
텍스트가 걸치는 여러 지점의 배경색을 각각 검사해야 합니다.
고급 다중 stop·radial·conic·wide-gamut gradient는 지원하지 않습니다. 실제 디자인에서는 fallback 단색과 배경 이미지 로드 실패 상태도 확인하세요.
이럴 때 유용합니다.
- 랜딩 hero 배경
- 배너 색상 조합
- 버튼·카드 gradient 초안
함께 확인하세요.
- 중간 영역 텍스트 대비 확인
- 다중 stop·radial 미지원
- banding·인쇄 결과 차이
자주 묻는 질문
사용 전 알아둘 점
각도 360과 0은 같은가요?
선형 gradient 방향은 같은 주기를 가리키지만 도구는 입력 검토를 위해 0~360을 허용합니다.
무작위 색상은 Math.random인가요?
아닙니다. 브라우저 crypto.getRandomValues에서 RGB byte를 얻습니다.
CSS가 자동 적용되나요?
미리보기 요소에만 적용되며 외부 사이트나 서버를 변경하지 않습니다.