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