메시 그라데이션
화려한 배경 CSS.
설명
여러 개의 방사형 그라데이션을 겹쳐 부드럽게 어우러지는 메시 그라데이션 배경을 생성합니다. 버튼을 누를 때마다 새 조합이 나오며 코드를 복사할 수 있습니다.
관련 도구
메시 그라데이션 생성기는 여러 색이 자연스럽게 섞이며 흐르는 듯한 메시(mesh) 형태의 그라데이션 배경 이미지를 클릭 몇 번으로 만들어 주는 도구입니다. 단순한 2색 그라데이션과 달리 3~6개의 색상이 유기적으로 어우러져 고급스럽고 입체적인 질감을 냅니다. 앱 배경, 웹 히어로 섹션, 프레젠테이션 슬라이드 배경, SNS 카드 등에서 세련된 분위기를 연출하고 싶을 때 바로 활용할 수 있습니다.
사용 방법
색상 팔레트에서 2~6개의 기반 색상을 선택하거나 HEX 코드를 직접 입력합니다. '생성' 버튼을 누를 때마다 같은 색상 조합에서 다른 배치 패턴의 메시 그라데이션이 새롭게 만들어지므로, 마음에 드는 결과가 나올 때까지 반복해서 생성할 수 있습니다. 해상도는 사용 목적에 맞게 설정하고, 미리보기 이미지가 원하는 느낌이면 'PNG 다운로드' 또는 'CSS 코드 복사'를 눌러 저장합니다. CSS 코드로 내보내면 이미지 파일 없이 웹 프로젝트에 직접 적용할 수 있어 로딩 속도 면에서도 유리합니다.
이럴 때 유용해요
스타트업 랜딩 페이지 히어로 섹션 배경으로 단색 대신 메시 그라데이션을 적용하면 별도 일러스트 없이도 시각적 완성도가 크게 올라갑니다. 인스타그램 계정의 통일된 피드 색감을 잡을 때 기반 색상을 브랜드 컬러로 고정하고 배경만 매번 생성하면 일관성 있는 카드 시리즈를 만들 수 있습니다. 유튜브 채널 아트나 팟캐스트 커버 아트처럼 정적인 이미지에 동적인 느낌을 더하고 싶을 때도 효과적입니다.
알아두면 좋은 점
색상 조합의 성패가 결과물 품질을 좌우합니다. 채도가 비슷한 색끼리 조합(예: 파스텔 계열끼리, 비비드 계열끼리)하면 자연스러운 혼합이 이루어지지만, 채도 차이가 크면 탁한 중간 색이 생길 수 있습니다. 보색 조합(보라+노랑, 청록+주황)은 강렬한 느낌을 주지만 면적을 좁게 쓰는 편이 좋습니다. 웹에서 CSS 방식으로 출력할 경우 브라우저별 렌더링 차이가 미미하게 있으므로, 최종 확인은 Chrome과 Safari 두 곳에서 해보는 것을 권장합니다.
자주 묻는 질문
생성된 그라데이션을 CSS 코드로 바로 쓸 수 있나요?
같은 색상 설정인데 매번 결과가 다른 이유는 무엇인가요?
몇 개의 색상을 조합하는 것이 가장 좋나요?
고해상도(4K 이상)로 내보낼 수 있나요?
상업적 프로젝트에 사용해도 되나요?
개인정보처리방침
모든 처리는 브라우저 내부에서만 수행되며 입력값·파일은 서버로 전송·저장되지 않습니다. 광고: Google AdSense(쿠키 사용 가능, 설정). 문의 kjh920424@gmail.com
메시 그라데이션이란
메시 그라데이션은 두 색을 직선으로 잇는 일반 그라데이션과 달리, 화면 곳곳에 흩어진 여러 개의 색 점(포인트)에서 색이 퍼져 나와 서로 겹치며 부드럽게 섞이는 배경입니다. 이 도구는 그 효과를 순수 CSS로 만듭니다. 색을 3~5개 고르면 각 색을 하나의 radial-gradient()로 만들어 배경의 서로 다른 지점에 배치하고, 이들을 background 속성에 콤마로 겹쳐 쌓습니다. 맨 아래에 단색 background-color를 깔아 빈 틈을 메꾸는 구조라, 이미지 파일 없이 CSS 코드 한 덩어리로 끝나는 것이 핵심입니다.
사용법
색상 팔레트에서 색을 추가·삭제하거나 각 색의 위치를 옮기고, 마음에 드는 조합이 나올 때까지 랜덤 버튼으로 배치를 섞습니다. 미리보기 박스가 실제 화면에서 보일 모습이며, 아래 코드 영역에 background-color + 여러 줄의 radial-gradient가 자동 갱신됩니다. 복사 버튼을 눌러 그대로 CSS에 붙여 넣으면 됩니다. 적용 대상 요소에는 배경이 요소 밖으로 잘리지 않도록 충분한 높이(예: min-height)를 주는 것이 좋고, 전체 화면 배경으로 쓰려면 body에 넣습니다.
작동 원리
생성되는 코드는 대략 다음과 같은 형태입니다. 각 줄이 하나의 색 점입니다.
| 구성 요소 | 역할 |
|---|---|
at 20% 30% | 색 점이 퍼지기 시작하는 좌표(가로%, 세로%) |
circle 40% / ellipse | 색이 번지는 모양과 반경 |
#ff6b6b 0%, transparent 60% | 중심은 진하게, 바깥으로 갈수록 투명 처리 |
포인트가 transparent로 끝나기 때문에 위에 쌓인 층 사이로 아래 색이 비쳐 보이고, 그 겹침이 곧 "섞인 색"으로 인식됩니다. 즉 실제로 픽셀을 계산해 혼합하는 것이 아니라, 반투명하게 겹친 원들의 착시로 메시 느낌을 냅니다. 이 때문에 브라우저 렌더링만으로 처리되어 파일 용량이 0이고, 어떤 해상도에서도 계단 없이 선명합니다.
활용 상황과 팁
랜딩페이지 히어로 섹션, 앱 로그인 화면, 프레젠테이션 표지, SNS 카드 배경, 다크모드 포인트 배경 등 "밋밋한 단색은 심심하고 사진은 무거울 때" 가장 유용합니다. 팁: 서로 비슷한 계열(예: 파랑~보라)로 3색만 쓰면 세련되고, 보색을 섞으면 경계가 탁해지기 쉽습니다. 텍스트를 얹을 때는 채도를 낮추거나 위에 반투명 검은 층을 하나 더 깔면 가독성이 살아납니다. 애니메이션을 원하면 background-position을 @keyframes로 천천히 움직여 색이 흐르는 효과를 줄 수 있습니다.
자주 묻는 질문
생성된 배경을 이미지 파일(PNG)로 저장할 수 있나요?
이 도구는 CSS 코드를 출력합니다. 코드 자체에는 화질 열화가 없고 무한 확대해도 선명하지만, PNG가 꼭 필요하면 브라우저에서 해당 요소를 화면 캡처하거나 스크린샷으로 저장하면 됩니다. 다만 이때는 캡처한 해상도에 고정된 래스터 이미지가 됩니다.
구형 브라우저에서도 보이나요?
radial-gradient는 현행 크롬·사파리·엣지·파이어폭스에서 모두 지원됩니다. 맨 아래에 깔리는 background-color 단색이 폴백 역할을 하므로, 그라데이션을 못 그리는 아주 오래된 환경에서도 최소한 단색 배경은 나타납니다.
색이 탁하게 섞여요. 왜 그런가요?
보색(예: 주황과 파랑)이 겹치면 중간에 회색빛이 도는 것은 색이 반투명하게 포개지는 방식 때문입니다. 유사 색으로 바꾸거나, 포인트 간 거리를 벌리거나, 각 색의 transparent 끝나는 지점을 좁혀 겹침을 줄이면 맑아집니다.
색 개수는 몇 개가 적당한가요?
3~4개일 때 균형이 가장 좋습니다. 색이 많아질수록 겹침 층이 늘어 배경이 복잡해지고, 그 위에 올린 콘텐츠가 묻힙니다. 강조가 필요하면 색을 늘리기보다 한 색의 채도를 높이는 편이 낫습니다.