CSS 그라데이션 — 코드 복사, 무료 | 사용법·입력·결과 해설
두 색 사이의 선형 또는 원형 그라데이션을 CSS background 선언으로 만듭니다. 색상 정지점을 복잡하게 편집하기 전에 두 색 조합과 방향을 시험할 수 있습니다.
- 브라우저에서 실행
- 업로드되지 않음
- 가입 없음, 기기 성능에 따라 제한될 수 있음
숫자는 기기에만 남습니다. 서버로 전송되지 않습니다.
유형
사용 방법과 입력
시작 색과 끝 색을 CSS가 이해하는 값으로 입력하고 선형 또는 원형을 고르세요. 각도는 선형 모드에 적용되므로 원형 모드에서 같은 효과를 기대하지 마세요.
결과 해설과 예제
선형 90도에서 빨강과 파랑을 고르면 왼쪽에서 오른쪽으로 색이 이동합니다. 출력한 background 선언을 복사하고 실제 글자가 올라갈 배경에서 읽기 쉬운지 확인하세요.
입력·결과 예시
선형 90도에서 빨강과 파랑을 고르면 왼쪽에서 오른쪽으로 색이 이동합니다. 출력한 background 선언을 복사하고 실제 글자가 올라갈 배경에서 읽기 쉬운지 확인하세요.
한계와 주의사항
- 추가 색상 정지점과 반복 그라데이션은 만들지 않습니다.
- 문자 대비와 브라우저별 색상 보간 차이를 자동 검사하지 않습니다.
입력 항목
| 항목 | 설명·제약 |
|---|---|
| 유형 | 선형 / 방사형 |
| 각도(선형, 도) | 허용 범위: 0–360 · 입력 간격: 1 |
| 시작 색 | 화면의 단위와 입력 형식을 확인하세요. |
| 끝 색 | 화면의 단위와 입력 형식을 확인하세요. |
데이터 처리
처리는 현재 브라우저 탭에서 수행되며, 도구 입력을 계산 목적으로 서버에 업로드하지 않습니다.
근거 출처
자주 묻는 질문
90도 선형 그라데이션은 어느 방향인가요?
선형 90도에서 빨강과 파랑을 고르면 왼쪽에서 오른쪽으로 색이 이동합니다. 출력한 background 선언을 복사하고 실제 글자가 올라갈 배경에서 읽기 쉬운지 확인하세요.
세 가지 이상의 색을 추가할 수 있나요?
추가 색상 정지점과 반복 그라데이션은 만들지 않습니다. 문자 대비와 브라우저별 색상 보간 차이를 자동 검사하지 않습니다.
관련 도구
처음부터 다시 할 필요는 없습니다. 다음 단계에 맞는 도구로 자연스럽게 이어가세요.
CSS box-shadow 선언 생성기 — 무료
가로·세로 이동, 흐림, 확산과 색을 조합해 box-shadow 선언 하나를 만듭니다. 카드나 버튼의 그림자를 직접 입력해 CSS 파일에 옮기려는 작업에 적합합니다.
색상 명암비 검사기 — WCAG 2
전경색과 배경색의 sRGB 상대 휘도로 명암비를 구하고 본문·큰 글씨 기준을 비교합니다. 색 조합을 설계하는 단계에서 숫자 기준을 빠르게 확인하는 용도입니다.
px를 rem으로 변환 — 루트 크기 기준 | 사용법·입력·결과 해설
픽셀 길이를 사용자가 지정한 루트 글꼴 크기로 나누어 rem 값으로 표현합니다. 웹페이지의 실제 스타일을 읽지 않으므로 디자인 토큰을 옮길 때 기준값을 직접 맞추어야 합니다.
