사용법
- "랜덤 생성"을 눌러 마음에 드는 색 조합이 나올 때까지 돌려 봅니다.
- 각 색을 눌러 원하는 색으로 바꾸거나, "색 추가"로 색을 더하고 ✕로 뺍니다.
- "위치 재배치"로 색이 번지는 위치를 바꿔 분위기를 조정합니다.
- "CSS 복사"로 코드를 받아 붙여 넣거나, "PNG 다운로드"로 이미지를 저장합니다.
메시 그라데이션이란
메시 그라데이션은 여러 색의 점이 화면 곳곳에서 부드럽게 번지며 섞이는 배경입니다. 한 방향으로만 이어지는 일반 그라데이션보다 훨씬 풍부하고 입체적인 느낌을 주어, 요즘 웹사이트 히어로 영역, 앱 배경, 발표 자료 표지 등에 자주 쓰입니다.
- radial-gradient를 여러 겹: 이 도구는 색마다 특정 위치에서 가장자리로 갈수록 투명해지는 원형 그라데이션을 만들고, 여러 겹 겹쳐 메시 느낌을 냅니다. 그래서 색이 만나는 곳에서 자연스럽게 섞입니다.
- 코드 한 벌로 적용: 결과는 CSS background 속성이라 이미지 없이 가볍게 적용되고, 화면 크기가 달라져도 깨지지 않습니다.
- 색 조합 고르기: 3~6개가 보기 좋습니다. 비슷한 톤끼리 모으면 차분하게, 보색을 섞으면 화려하게 보입니다. 컬러 팔레트 생성으로 색을 먼저 정해도 좋습니다.
활용 팁
- 히어로 배경: 사이트 첫 화면 배경에 깔면 단조로운 단색보다 훨씬 세련돼 보입니다. 글자가 잘 보이도록 너무 밝거나 대비가 강한 색은 피하세요.
- 프로필·썸네일: PNG로 저장해 SNS 배경, 발표 표지, 카드 뉴스 바탕으로 쓸 수 있습니다. 이미지 크기 조절로 필요한 크기에 맞추세요.
- 다크모드 대응: 어두운 색 위주로 조합하면 다크 테마 배경으로 잘 어울립니다. 밝은 버전과 어두운 버전을 각각 만들어 두면 편합니다.
자주 묻는 질문
Q. 메시 그라데이션이 일반 그라데이션과 어떻게 다른가요?
일반 그라데이션이 두세 가지 색이 한 방향으로 이어지는 것이라면, 메시 그라데이션은 여러 색의 점이 화면 곳곳에서 부드럽게 번지며 섞이는 형태입니다. 더 풍부하고 몽환적인 배경을 만들 수 있어 요즘 웹·앱 디자인에서 많이 쓰입니다.
Q. 만든 그라데이션을 어떻게 쓰나요?
CSS 복사 버튼으로 background 속성 코드를 받아 원하는 요소에 붙여 넣으면 됩니다. 코드 한 벌이면 별도 이미지 없이 배경이 적용되어 가볍고 어떤 크기에서도 깨지지 않습니다. 이미지가 필요하면 PNG 다운로드로 저장할 수도 있습니다.
Q. 이 도구는 어떤 방식으로 색을 섞나요?
각 색마다 특정 위치에서 시작해 가장자리로 갈수록 투명해지는 원형 그라데이션(radial-gradient)을 만들고, 이들을 여러 겹 겹쳐 메시 느낌을 냅니다. 색마다 위치가 다르기 때문에 색이 만나는 부분에서 자연스럽게 섞입니다.
Q. 색은 몇 개까지 넣을 수 있나요?
보통 3~6개 정도가 보기 좋습니다. 너무 많으면 색이 탁해질 수 있어 이 도구는 최대 6개까지 지원합니다. 색을 더하거나 빼면서 랜덤 생성 버튼으로 다양한 조합을 빠르게 살펴보세요.
Q. 작업 내용이 서버로 전송되나요?
아니요. 색 선택, 코드 생성, PNG 저장은 모두 브라우저 안에서 처리되며 어떤 데이터도 서버로 전송되지 않습니다. 새로고침하면 작업 내용은 사라집니다.
함께 보면 좋은 도구