개발·웹
CSS 그라데이션 만드는 법
페이지, 카드, 슬라이드 뒤에 그라데이션을 깔고 싶은데 CSS를 시행착오로 쓰자면 오래 걸립니다. 종류를 고르고 색을 배치한 뒤, 바로 붙여 넣을 CSS를 복사하거나 이미지로 저장합니다. 브라우저에서 동작합니다.
그라데이션 위의 글자는 양쪽 끝에서 모두 읽을 수 있어야 합니다. 가장 밝은 색과 가장 어두운 색을 쓰려는 글자색과 함께 시험해 보세요.
CSS 그라데이션 생성기 열기이 한 자리
그라데이션 종류 고르기
선형은 직선으로 섞이며 대부분의 배경에 어울립니다. 원형은 은은한 빛처럼 중심에서 퍼져 나갑니다. 원뿔형은 색상환이나 원그래프처럼 한 점을 중심으로 돕니다.
세 종류는 색이 지나가는 경로가 다릅니다. cv.cm CSS 그라데이션 생성기 열기
「그라데이션」에서 종류를 고르세요. 시작점으로 프리셋을 누르거나 아이디어가 필요하면 「무작위」를 누르면 미리보기가 바로 바뀝니다.
CSS 그라데이션 생성기 열기방향 정하기
선형과 원뿔형은 「각도」를 끌어서 정합니다. 0°는 위, 90°는 오른쪽, 180°는 아래를 가리킵니다. 원형은 대신 「원」이나 「타원」을 고르세요.
색 배치하기
각 색은 0%에서 100% 사이의 위치를 가지며 6개까지 쓸 수 있습니다. 「색 추가」로 하나를 넣고 ×로 지웁니다. 위치가 가까우면 경계가 뚜렷하고, 멀면 부드럽게 섞입니다.
각 색은 선 위의 한 위치에 놓이고, CSS는 이를 순서대로 나열합니다. CSS 복사하기
「CSS 복사」는 두 줄을 줍니다. 아주 오래된 브라우저를 위한 단색과 그 뒤의 그라데이션입니다. 요소의 CSS 규칙에 붙여 넣으세요. body나 카드처럼 크기가 있는 블록이면 어디든 됩니다.
또는 PNG로 저장하기
슬라이드와 배경화면용이라면 「이미지 크기」를 고르고 「PNG 저장」을 누르세요. 1920 × 1080, 2560 × 1440, 휴대폰용 1080 × 1920, 정사각형 게시물용 1080 × 1080이 있습니다.
자주 묻는 질문
그라데이션이 페이지에 왜 안 보이나요?
요소에 높이가 없을 가능성이 큽니다. 그라데이션은 요소의 상자를 채우므로 빈 블록은 높이가 0입니다. 높이를 주거나 내용을 넣으세요. 페이지 전체라면 html과 body의 높이를 100%로 설정하세요.
CSS에 background 줄이 왜 두 개인가요?
첫 줄은 단색이고 둘째 줄은 그라데이션입니다. 그라데이션을 그리지 못하는 브라우저는 그 줄을 무시하고 단색을 유지합니다.
background와 background-image 중 어느 쪽이 나은가요?
그라데이션은 이미지로 취급되므로 둘 다 됩니다. background는 더 짧지만 다른 배경 설정도 초기화하므로, 다른 배경 위에 겹칠 때는 background-image를 쓰세요.
색이 딱 끊어지는 줄무늬는 어떻게 만드나요?
두 색을 같은 위치에 두세요. 예를 들어 둘 다 50%에 둡니다. 섞일 공간이 없으므로 색이 날카로운 선에서 바뀝니다.
PNG에 계단 같은 띠가 왜 보이나요?
비슷한 색 사이의 아주 넓은 그라데이션은 희미한 단계가 보일 수 있습니다. PNG가 색 채널마다 256단계로 저장하기 때문입니다. 색 차이를 더 크게 하거나 이미지 편집기에서 약간의 질감을 더하세요.