모든 화면 테스트 도구그라데이션 테스트
그라데이션 이미지 생성기
두 가지 또는 세 가지 색상으로 선형·방사형 그라데이션을 만드세요. 각도와 크기를 설정하고 배경 이미지를 다운로드하거나 웹사이트용 CSS를 복사할 수 있습니다.
- 선형 및 방사형 그라데이션
- 이미지 다운로드 및 CSS
실시간 미리 보기
1920 × 1080 px미리 보기는 화면에 맞게 축소됩니다. 다운로드한 이미지는 위에 지정한 정확한 픽셀 크기를 사용합니다.
background: linear-gradient(90deg, #2563eb, #e879f9);브라우저의 색상 보간 방식에 따라 CSS와 PNG의 표현에 약간의 차이가 생길 수 있습니다.
사용 방법
- 이미지 크기를 설정하고 선형 또는 방사형 그라데이션을 선택하세요.
- 시작 색상과 끝 색상을 고르고 필요하면 중간 색상을 추가한 뒤 선형 각도를 조절하세요.
- PNG나 JPEG를 다운로드하거나 CSS 배경 선언을 복사하세요.
사용 조건 및 제한
장식용 그라데이션 배경을 만드는 도구입니다. 색 띠 현상을 확인하려면 별도의 그라데이션 테스트를 사용하세요. 생성한 이미지로 화면의 비트 심도나 색 정확도를 인증할 수는 없습니다.
자주 묻는 질문
그라데이션 각도는 무엇을 의미하나요?
CSS 규칙에 따라 0°는 아래에서 위로, 90°는 왼쪽에서 오른쪽으로, 180°는 위에서 아래로 진행합니다. 방사형 그라데이션은 중심에서 시작합니다.
다운로드한 그라데이션이 CSS와 정확히 같나요?
같은 색상과 방향을 사용하지만 브라우저의 색상 보간과 이미지 크기 조정에 따라 작은 차이가 생길 수 있습니다. 고정된 픽셀 결과가 필요하면 다운로드한 이미지를 사용하세요.