그라데이션 생성기
색상 위치와 각도를 조정해 CSS 선형 그라디언트를 만들고 코드를 복사합니다. 웹 배경의 색 전환을 빠르게 비교할 수 있지만 배경 위 텍스트의 접근성은 별도로 확인해야 합니다.
- 브라우저에서 실행
- 업로드되지 않음
- 가입 없음, 기기 성능에 따라 제한될 수 있음
계산 도구를 불러오는 중입니다. 도구가 표시되지 않으면 페이지를 새로고침하세요.
사용 방법과 입력
2개부터 8개까지 색상 지점을 지정하고 위치는 0부터 100% 사이로 설정하세요. 각도와 색상 순서가 결과에 영향을 주며 도구는 위치 순으로 지점을 정렬합니다.
결과 해설과 예제
90도에서 빨강 0%, 파랑 100%를 놓으면 왼쪽에서 오른쪽으로 두 색이 전환되는 linear-gradient가 됩니다. 같은 위치에 두 색을 놓으면 부드러운 전환 대신 경계가 생길 수 있습니다.
한계와 주의사항
- 일부 화면과 브라우저에서는 색 관리와 보간 때문에 색이 조금 다르게 보일 수 있습니다.
- 한 지점의 색상 대비만 통과해도 전체 그라디언트 배경의 가독성이 보장되지는 않습니다.
입력 항목
| 항목 | 설명·제약 |
|---|---|
| 유형 | 화면의 단위와 입력 형식을 확인하세요. |
| 각도 (deg) | 화면의 단위와 입력 형식을 확인하세요. |
| 색 1 | 화면의 단위와 입력 형식을 확인하세요. |
| 위치 % | 화면의 단위와 입력 형식을 확인하세요. |
| 색 2 | 화면의 단위와 입력 형식을 확인하세요. |
| CSS | 화면의 단위와 입력 형식을 확인하세요. |
데이터 처리
처리는 현재 브라우저 탭에서 수행되며, 도구 입력을 계산 목적으로 서버에 업로드하지 않습니다.
근거 출처
자주 묻는 질문
90도 그라디언트는 어느 방향인가요?
90도에서 빨강 0%, 파랑 100%를 놓으면 왼쪽에서 오른쪽으로 두 색이 전환되는 linear-gradient가 됩니다. 같은 위치에 두 색을 놓으면 부드러운 전환 대신 경계가 생길 수 있습니다.
배경 위 글자 대비도 보장하나요?
일부 화면과 브라우저에서는 색 관리와 보간 때문에 색이 조금 다르게 보일 수 있습니다. 한 지점의 색상 대비만 통과해도 전체 그라디언트 배경의 가독성이 보장되지는 않습니다.
