메시 그라디언트 생성기이란?
웹사이트 배경, 소셜 미디어 그래픽, UI 디자인용 멀티 컬러 메시 그라데이션을 생성합니다. 색상을 고르고 제어 포인트를 배치해서 단순한 선형이나 방사형 패턴을 넘어서는 유기적인 그라데이션을 만들어 보세요.
캔버스는 여러 방사형 그라데이션을 컨트롤 포인트마다 하나씩 겹쳐 놓습니다. 포인트를 드래그해 혼합 형태를 바꾸고 스와치로 색을 교체하면 코드가 실시간으로 갱신됩니다. 최대 여섯 개의 포인트면 결과의 균형이 유지됩니다. 1920x1080 같은 배너 크기로 PNG나 SVG로 내보내거나, SVG를 Figma에 바로 붙여 넣거나, 코드를 CSS, SCSS, Tailwind로 가져갈 수 있습니다.
사용 방법
- 색상 견본을 클릭하거나 헥스 값을 입력하여 기본 색상을 선택하세요. 최대 6개의 색상 제어 포인트를 추가할 수 있습니다.
- 캔버스에서 제어 포인트를 드래그하여 그라데이션 흐름을 바꿔 보세요.
- 코드를 CSS, SCSS 또는 Tailwind로 복사하거나 그라데이션을 PNG 또는 SVG로 다운로드하세요.
사용 시기
- 템플릿 같지 않은 히어로 영역 배경을 만들 때.
- 사진 없이 색만으로 제품 카드나 플레이리스트 아트워크를 꾸밀 때.
- 앱 로딩 화면이나 빈 상태용 플레이스홀더 배경을 만들 때.
결과
UI 디자이너가 랜딩 페이지 히어로 섹션을 위해 보라색에서 청록색으로 이어지는 4포인트 메시 그라데이션을 만들고 CSS 코드를 복사하여 스타일시트에 바로 붙여넣습니다.
자주 묻는 질문
- 메시 그라데이션과 선형 그라데이션의 차이는 무엇인가요?
- 선형 그라데이션은 한 축을 따라 두 색을 섞습니다. 메시 그라데이션은 부드러운 색 얼룩 여러 개를 겹쳐 두기 때문에 깔끔한 전환보다 수채화 번짐에 가까운 인상을 줍니다. 색 사이의 경계도 더 눈에 띄지 않습니다.
- 왜 CSS가 conic-gradient가 아니라 radial-gradient를 쓰나요?
- 쌓아 올린 radial-gradient는 브라우저 지원 폭이 가장 넓고 폴백도 깔끔합니다. 도구는 제어 포인트마다 radial-gradient 한 줄씩 출력하고 background-image로 겹쳐 쌓아서, 모든 최신 브라우저에서 폴리필 없이 동작합니다.
- 내가 만든 메시 그라데이션이 사파리와 크롬에서 똑같이 보이나요?
- 네. 출력은 벤더 프리픽스가 필요 없는 표준 CSS radial-gradient입니다. 사파리, 크롬, 파이어폭스, 엣지 모두 동일한 결과를 그립니다. 매우 오래된 브라우저는 첫 번째 색으로 폴백됩니다.
- 제어 포인트는 최대 몇 개까지 쓸 수 있나요?
- 최대 6개입니다. 그 이상 늘리면 풍부해지기보다 보통 탁해집니다. 2~3개는 단정한 그래픽 스타일 그라데이션을 만들고, 4~6개는 더 회화적인 번짐 효과를 냅니다.
- 그라데이션을 SVG로 내보낼 수 있나요?
- 네. SVG 내보내기는 겹쳐 쌓은 radial-gradient 레이어로 그라데이션을 만들기 때문에 CSS 그라데이션이 작동하는 곳이면 어디서나 표시되고 Figma에는 도형 채우기로 바로 붙여 넣을 수 있습니다. 사양 그대로의 진짜 SVG 메시 그라데이션은 아직 어디에서도 지원되지 않으므로, 이 겹치기 방식이 어디에 붙여 넣든 실제로 동작하는 버전입니다.