개요 CSS 그라디언트
지각 균일 그라디언트 생성
사용 방법
여러 색 정지점을 가진 선형·방사형 그라데이션을 만들고, 각도와 색 공간을 조정한 뒤 완성된 CSS를 복사하세요.
CSS 그라디언트
0%
100%
선형, 방사형, 원뿔형 그라데이션
선형은 지정 각도의 직선을 따라, 방사형은 중심에서 밖으로, 원뿔형은 색상환처럼 중심 주위를 회전하며 색을 섞습니다.
각 색상 지점을 0%~100%에서 움직여 시작과 끝을 조절한 뒤 생성된 CSS를 복사하세요.
CSS 출력과 성능
CSS 그라데이션은 이미지 요청 없이 브라우저가 렌더링하므로 어떤 해상도에서도 선명합니다.
대부분의 UI에는 2~3개의 지점이면 충분합니다. 지점이 너무 많으면 렌더링 비용은 작지만 유지보수가 어려워집니다.
자주 묻는 질문
생성된 그라데이션은 어떻게 사용하나요?
background 선언을 복사해 CSS 규칙에 붙여 넣습니다. 색, 각도, 위치를 바꾸면 미리보기와 코드가 함께 갱신됩니다.
어떤 각도를 사용해야 하나요?
0deg는 위, 90deg는 오른쪽, 180deg는 아래입니다. 프리셋 버튼으로 자주 쓰는 방향으로 이동합니다.
투명 그라데이션을 만들 수 있나요?
가능합니다. 복사 후 CSS에서 투명 지점이나 rgba 값을 사용하세요.
이메일에서도 동작하나요?
많은 이메일 클라이언트가 그라데이션을 무시합니다. 그라데이션 앞에 단색 대체 색을 넣으세요.