메쉬 그라데이션을 CSS와 SVG로 내보내기
색상을 2개에서 8개까지 고르면 부드럽게 섞인 메쉬 그라데이션 배경이 만들어지고, 색상 점을 드래그해서 모양을 다듬을 수 있어요. CSS 복사를 누르면 최신 브라우저 어디서나 동작하는 CSS를 얻고, SVG 다운로드를 누르면 어떤 크기로도 늘려 쓸 수 있는 1600 × 1200 파일을 저장해요. 모든 작업은 브라우저 안에서 이루어지고, WebGL도 업로드도 계정도 필요 없어요.
그라데이션 배경 만들기, 순서대로
- 미리보기를 살펴보세요. 위에 보이는 작고 둥근 점이 색상 점이에요. 메쉬의 색 덩어리마다 점이 하나씩 있어요.
- 무작위를 누르면 팔레트와 배치가 무작위로 새로 바뀌어요. 마음에 드는 모양에 가까워질 때까지 몇 번이든 누를 수 있어요.
- 색상 줄을 열고 색 견본을 클릭해서 원하는 색을 고르세요. 색상 추가로 색을 늘리고(최대 8개), 색 견본의 작은 x로 줄일 수 있어요(최소 2개).
- 복잡도 슬라이더를 2에서 6 사이로 움직이면 메쉬의 색상 점 개수가 바뀌어요.
- 점을 드래그하면 움직일 수 있어요. 마우스든 손가락이든 괜찮아요. 키보드로는 점을 선택하고 방향키를 누르세요. Shift를 누른 채로 누르면 더 크게 움직여요.
- 미리보기가 마음에 들면 CSS 복사 또는 SVG 다운로드를 누르세요. 짧게 복사했어요 또는 저장했어요라고 표시되면 끝난 거예요.
미리보기는 무엇을 바꾸든 바로 업데이트되고, CSS 코드 칸에는 지금 보이는 모습 그대로의 CSS가 항상 표시돼요. 복잡도를 바꾸거나 "무작위"를 누르면 점이 다시 배치되기 때문에, 직접 옮겨 둔 점도 새 위치로 돌아가요.
복잡도는 무엇을 바꾸나요
복잡도를 올리면 복잡도 × 복잡도 개의 색상 점이 격자로 놓이고, 각 점에 팔레트의 색이 하나씩 배정돼요. 점이 많을수록 색 덩어리가 작고 변화가 풍부한 메쉬가 되고, 적을수록 넓고 단순한 색 면이 돼요.
- 복잡도 2: 색상 점 4개, 한 덩어리가 캔버스의 65%
- 복잡도 3: 9개, 43%
- 복잡도 4: 16개, 33%
- 복잡도 5: 25개, 26%
- 복잡도 6: 36개, 22%
한 가지 주의할 점이 있어요. 색은 점에 하나씩 나눠 배정되기 때문에, 팔레트의 색이 메쉬의 점보다 많을 수 있어요. 복잡도 2에서는 점이 4개뿐이라서 6색 팔레트도 한 번에 최대 4색만 보여요. 나머지 색을 보려면 복잡도를 올리세요.
바로 붙여 넣는 메쉬용 CSS
CSS 코드 칸에는 선언이 두 개 들어 있어요. 하나는 background-color로, 팔레트의 평균 색이라서 모서리가 비는 일이 없어요. 다른 하나는 색상 점마다 radial-gradient()를 하나씩 쌓은 background-image예요. 이미지 파일도 스크립트도 쓰지 않는 평범한 CSS예요.
각 레이어는 가운데의 진한 색에서 가장자리의 완전한 투명까지 옅어지고, 레이어끼리 겹치면서 색이 서로 녹아들어요. 크기와 위치는 퍼센트로 정해져 있어서, 적용하는 요소에 맞춰 늘어나요.
SVG 파일로 저장하기
SVG 다운로드를 누르면 메쉬-그라데이션.svg가 저장돼요. 이 파일은 viewBox가 1600 × 1200이고, 같은 평균 색의 바탕 사각형과 색상 점마다 하나씩의 radialGradient가 들어 있어요. 벡터라서 휴대폰 배경 화면, 슬라이드 배경, SNS 게시물 배경으로 써도 선명해요. 4:3이 아닌 프레임에서는 늘리지 않고 프레임을 채우면서 가장자리를 잘라내요.
PNG가 필요하다면 SVG를 읽을 수 있는 브라우저나 편집기에서 열고 원하는 크기로 내보내세요.
그라데이션 만들기 사이트 대신 쓰는 방법
- 웹사이트나 히어로 영역: 해당 요소의 규칙에 CSS를 붙여 넣으세요. 색이 복잡하게 섞인 배경 위의 글자는 읽기 어려울 수 있으니 색상 대비 검사기로 확인해 보세요.
- 슬라이드, 배경 화면, SNS 게시물: SVG를 저장해서 디자인 앱에 놓거나 내보내세요.
- 브랜드 색에 맞추기: 색 견본을 클릭해서 원하는 색을 고르세요. 이미지 색상 추출기로 사진이나 로고에서 색을 먼저 뽑을 수도 있어요.
두 결과물 모두 지금 미리보기를 그대로 담은 거예요. 무작위로 다시 섞었다면 새 결과를 다시 복사하거나 저장하세요.
자주 묻는 질문
CSS를 바로 복사할 수 있는 메쉬 그라데이션 도구가 있나요?
네, 이 도구예요. "CSS 코드" 칸에 background-color와, 색상 점마다 쌓은 radial-gradient()로 이루어진 background-image가 표시돼요. 자바스크립트도 이미지 파일도 쓰지 않는 표준 CSS라서 최신 브라우저 어디서나 동작해요. "CSS 복사"를 누른 뒤 스타일시트나 style 속성에 붙여 넣으세요.
그라데이션을 SVG로 저장할 수 있나요?
네. "SVG 다운로드"를 누르면 viewBox가 1600 × 1200인 파일이 저장돼요. radialGradient 레이어로 만들어져 있어서 어떤 크기에서도 선명해요. 4:3이 아닌 프레임에서는 늘리지 않고 프레임을 채우면서 가장자리를 잘라내요.
그라데이션 배경 만들기 사이트처럼 웹사이트 배경에 쓰려면 어떻게 하나요?
CSS를 복사해서 색을 입힐 요소(히어로 영역이나 body 등)의 규칙에 두 선언을 붙여 넣으세요. 색 덩어리는 퍼센트로 배치돼 있어서 요소에 맞춰 늘어나요. 고른 색 위에서도 글자가 잘 읽히는지 확인하세요.
PNG로 받을 수 있나요?
바로는 안 돼요. 이 도구가 내보내는 건 CSS와 SVG이고 PNG는 지원하지 않아요. 저장한 파일을 SVG가 열리는 브라우저나 편집기에서 열고, 필요한 픽셀 크기로 내보내거나 스크린샷을 찍으세요.
그라데이션을 움직이게 할 수 있나요?
아니요. 이 도구는 움직이지 않는 그라데이션 한 장을 만들어요. 점을 드래그하고 색을 바꿀 수는 있지만, 내보낸 CSS와 SVG는 움직이지 않아요.
일러스트레이터의 그라데이션 메쉬와 같은 건가요?
아니요. 일러스트레이터의 그라데이션 메쉬는 편집할 수 있는 벡터 패치를 격자로 늘어놓은 거예요. 이 도구는 색상 점마다 부드러운 방사형 그라데이션을 하나씩 겹쳐요. 매끄러운 다색 느낌은 비슷하지만, 결과물은 평범한 CSS나 SVG로 내보내져요.
피그마 메쉬 그라데이션처럼 쓸 수 있나요?
피그마 안에서 직접 만드는 건 아니에요. 이 도구에서 SVG를 저장한 뒤 SVG를 불러올 수 있는 디자인 앱에 가져가서 배경으로 쓰면 돼요.
