CSS 그라데이션 생성기
이 탭에서 동작합니다. 업로드 없음.
CSS
이 도구 사용법
CSS 배경 그라데이션을 디자인하고 코드를 복사하세요. 업로드 없음.
종류 또는 프리셋 선택
프리셋이나 「무작위」에서 시작한 뒤 선형, 원형, 원뿔형 중에서 고르고 각도나 모양을 정하세요.
색 정하기
각 색을 바꾸고 위치를 드래그하세요. 최대 6개까지 추가할 수 있고, ×로 하나를 삭제합니다.
CSS 복사
「CSS 복사」를 눌러 스타일시트에 붙여넣거나, 크기를 고르고 「PNG 저장」으로 배경화면을 만드세요.
자주 묻는 질문
CSS 그라데이션은 어떻게 만드나요?
종류(선형, 원형, 원뿔형)를 고르고 색과 위치를 정한 뒤 각도나 모양을 조정하세요. CSS가 바로바로 바뀌며, 「CSS 복사」를 누르면 됩니다.
색 정지점(color stop)이란 무엇인가요?
그라데이션 위 0%부터 100% 사이 한 위치에 놓인 색입니다. 최대 6개까지 추가할 수 있고, 그라데이션은 위치 순서대로 색을 섞습니다.
background 줄이 왜 두 개인가요?
첫 줄은 아주 오래된 브라우저를 위한 단색이고, 두 번째 줄이 그라데이션입니다. 현재 브라우저는 모두 그라데이션을 씁니다.
그라데이션을 이미지로 저장할 수 있나요?
네. 크기(데스크톱, 휴대폰, 1440p, 정사각)를 고르고 「PNG 저장」을 누르세요. 브라우저에서 그려집니다.
선형, 원형, 원뿔형의 차이는?
선형은 각도를 가진 선을 따라 섞입니다(90°는 왼쪽에서 오른쪽). 원형은 가운데에서 원이나 타원으로 퍼집니다. 원뿔형은 색상환처럼 가운데를 중심으로 돌아갑니다.