UTILS.
기본부터 지키는 개인정보
▤

CSS 그라데이션 생성기

선형 또는 방사형 그라데이션을 실시간 미리보기로 만들고 CSS를 복사하세요.

파일은 이 기기에만 남습니다

파일은 브라우저에서 처리되며 업로드되지 않습니다. 사이트는 도구 실행에 필요한 코드와 리소스를 다운로드합니다. 계정이나 추적은 없습니다.

다운로드를 눌러 이 도구를 하나의 HTML 파일로 저장하고 오프라인으로 사용하세요.

개인정보 →

예제로 직접 확인하기

예제

선형 유형을 고르고 각도를 135, 색을 #ff7e5f와 #feb47b로 설정하세요. CSS는 background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);입니다. 첫 번째 정지점을 20으로 옮기면 상자의 처음 20%는 첫 번째 색으로 채워집니다.

알아둘 점

0deg는 위, 90deg는 오른쪽을 가리키므로 135deg는 왼쪽 위 모서리에서 오른쪽 아래로 이어집니다. 그라데이션 위에 텍스트가 있다면 양 끝 색 각각과의 대비를 확인하세요.

이 도구에 대하여

색상, 위치, 각도를 선택해 두 색상의 선형 또는 방사형 그라데이션을 만들고 background 규칙을 복사하세요. 실시간 미리보기는 전적으로 브라우저에서 실행됩니다.

자주 묻는 질문

선형 그라데이션에서 각도란 무엇인가요?
각도는 색상 전환의 방향을 설정합니다. 0°는 위쪽, 90°는 오른쪽, 180°는 아래쪽을 가리키는 식입니다.
선형 대신 방사형을 언제 사용해야 하나요?
중심점에서 색상이 바깥으로 퍼져 나가게 하려면(스포트라이트처럼) 방사형을 사용하세요. 선형은 직선을 따라 색상을 섞습니다.

더 많은 도구