🫧 그라디언트 메시 배경 | 다색 배경 어떻게 만들까?

배경 기본 색 (HEX)

레이어 목록 (줄마다 HEX 중심X 중심Y 크기 불투명도, 3~5줄)

값은 공백이나 쉼표로 구분하고 % 기호 없이 숫자만 적습니다. 예: #EC4899 20 25 55 85 는 색 #EC4899, 중심 (20%, 25%), 크기 55%, 불투명도 85% 를 뜻합니다.

붙여 쓸 CSS

레이어	HEX	중심 X, Y	크기	불투명도

끝 색으로 transparent 대신 같은 색의 알파 0 값을 씁니다. 요즘 브라우저에서는 transparent 도 탁해지지 않지만, 구형 환경과 디자인 툴에서 어둡게 번지는 것을 피하려는 선택입니다.

radial-gradient 를 겹쳐 메시 느낌의 배경 만들기

요즘 많이 보이는 다색 배경은 색 번짐이 여러 방향에서 겹쳐 생깁니다. 이 페이지는 그중 가장 다루기 쉬운 구성 하나만 다룹니다. 원형 radial-gradient 를 3개에서 5개까지 겹치고, 각 레이어의 색·중심 좌표·크기·불투명도를 전부 직접 넣는 방식입니다. 보기 좋다고 미리 정해 둔 색이나 위치는 제공하지 않습니다.

생성되는 코드의 구조

배경 기본 색은 background-color 로, 각 레이어는 background-image 의 콤마 구분 목록으로 나가고 먼저 쓴 레이어가 위에 쌓입니다. 레이어의 끝 색은 transparent 가 아니라 같은 색의 알파 0 값을 씁니다. 요즘 브라우저는 미리 곱한 알파로 섞어 transparent 도 탁해지지 않지만, 구형 환경과 디자인 툴 호환을 위해서입니다. 중심 좌표는 음수나 100 초과도 받습니다. 2026년 10월 기준 CSS Images 명세 문법을 따랐습니다.

다루지 않는 것

선형과 원뿔형 그라디언트는 다른 도구가 맡으므로 여기서는 만들지 않습니다. 이 방식도 진짜 메시 면을 계산하는 것이 아니라 원형 번짐을 겹쳐 비슷하게 보이게 하는 구성이며, 애니메이션이나 블러는 포함하지 않습니다.

자주 묻는 질문

왜 끝 색을 transparent 로 쓰지 않나요?

CSS 에서 transparent 는 알파가 0인 검정이지만, 요즘 브라우저는 그라디언트를 미리 곱한 알파(premultiplied)로 섞어서 transparent 로 끝나도 탁해지지 않습니다. 이 도구는 구형 환경과 디자인 툴 호환을 위해 같은 색의 알파 0 값을 끝 색으로 씁니다.

중심 좌표에 음수를 넣어도 되나요?

됩니다. -50 에서 150 까지 받습니다. 중심을 화면 밖에 두면 번짐의 일부만 걸쳐 모서리부터 물드는 모양이 나옵니다.

선형 그라디언트나 원뿔형도 만들어 주나요?

아니요, 여기서는 원형 radial-gradient 조합만 다룹니다. 선형과 원형 단독 생성, 원뿔형 생성, background-image 레이어 겹치기는 각각 다른 도구가 맡고 있습니다.

🫧그라디언트 메시(mesh) 배경 생성 가이드

관련된 도구

CSS 그라디언트 생성기

CSS 박스 쉐도우 생성기

radial-gradient 를 겹쳐 메시 느낌의 배경 만들기

생성되는 코드의 구조

다루지 않는 것

자주 묻는 질문

관련된 도구

CSS 그라디언트 생성기

CSS 박스 쉐도우 생성기

radial-gradient 를 겹쳐 메시 느낌의 배경 만들기

생성되는 코드의 구조

다루지 않는 것

자주 묻는 질문

같은 카테고리 도구