CSS 그라데이션 만들기

CSS 그라데이션 만들기 사용법

두 가지 이상의 색이 부드럽게 이어지는 그라데이션을 눈으로 보면서 만들고, 웹 페이지에 붙일 CSS 코드나 배경으로 쓸 PNG 이미지로 가져가는 도구입니다. 버튼과 머리말 배경, 발표 자료 바탕, SNS에 올릴 카드 그림의 배경을 만들 때 씁니다.

쓰는 순서

1. 모양에서 선형, 원형, 원뿔 가운데 하나를 고릅니다.
2. 선형은 방향 각도를, 원뿔은 시작 각도와 중심 위치를, 원형은 중심 위치를 정합니다.
3. 색과 위치에서 색 칸을 눌러 색을 고르거나 HEX 값을 직접 적고, 위치 숫자나 막대로 그 색이 놓일 자리를 정합니다.
4. 위쪽 미리보기가 바로 바뀝니다. 마음에 들면 CSS 복사를 누르거나, 크기를 적고 PNG 저장을 누릅니다.

빨리 시작하려면 본보기의 이름(노을, 바다, 숲, 밤하늘 등)을 눌러 불러온 뒤 색만 바꾸세요. 아무 색이나는 무작위 두 색으로 새로 시작하고 처음으로는 기본 상태로 되돌립니다.

세 가지 모양

예시: 기본 그라데이션의 코드

처음 열면 선형, 방향 90도, 파랑 #1f6feb 0%, 보라 #a855f7 100%로 되어 있고 CSS 코드 칸에는 다음 두 줄이 나옵니다.

background: #1f6feb;
background: linear-gradient(90deg, #1f6feb 0%, #a855f7 100%);

첫 줄은 그라데이션을 그리지 못하는 환경에서 보일 단색이고, 둘째 줄이 그라데이션입니다. 두 줄을 그대로 CSS 규칙 안에 붙이면 됩니다. 아래쪽을 가리키는 화살표 버튼을 눌러 180도로 바꾸면 위에서 아래로 변하고, 코드의 각도도 180deg로 바뀝니다.

색 위치 다루기

• 위치는 그라데이션 길이에 대한 퍼센트입니다. 두 색의 위치가 가까울수록 그 사이가 급하게 바뀌고, 멀수록 완만합니다.
• 두 색을 같은 위치에 놓으면 그 자리에서 색이 뚝 끊깁니다. 예를 들어 빨강 50%, 파랑 50%로 두면 반반 나뉜 띠가 됩니다. 줄무늬나 깃발 모양을 만들 때 쓰는 방법입니다.
• 색 추가는 마지막 두 색 사이에 새 색을 넣습니다. 색은 12개까지 넣을 수 있고 2개 아래로는 뺄 수 없습니다.
• 위치 고르게는 색들을 같은 간격으로 다시 놓고, 순서 뒤집기는 시작과 끝을 바꿉니다.
• 코드에는 위치가 작은 색부터 순서대로 적힙니다. 목록의 줄 순서와 달라도 결과는 같습니다.

PNG 이미지로 저장하기

크기 칸에 1920x1080처럼 가로x세로를 적고 PNG 저장을 누르면 미리보기와 같은 그라데이션이 그 크기의 이미지로 저장됩니다. 한 줄에 하나씩 여러 크기를 적으면 모두 만들어 ZIP 파일 하나로 받습니다. 자주 쓰는 크기의 버튼을 누르면 그 크기가 목록에 추가됩니다. 한 변은 8000px까지 됩니다.

이미지에서 원형 그라데이션은 중심에서 가장 먼 모서리까지 퍼지게 그립니다. CSS 코드의 circle과 같은 방식이라 화면에서 보던 모양과 같습니다.

알아 둘 점

• 웹 페이지 배경은 이미지보다 CSS 코드가 낫습니다. 용량이 거의 없고 화면 크기가 달라져도 깨지지 않습니다. 이미지는 CSS를 쓸 수 없는 문서, 영상, 인쇄물에 쓰세요.
• 글자를 그라데이션 위에 올릴 때는 가장 밝은 부분과 가장 어두운 부분 양쪽에서 글자가 읽히는지 확인해야 합니다.
• 이 그라데이션 주소 복사로 받은 주소에는 모양, 각도, 색과 위치가 모두 담겨 있어 다른 사람이 열면 같은 화면이 나옵니다.