메시 그라디언트 겹칠 때 위로 보이는 색 정하는 법
메시 그라디언트 배경을 만들다가 색 점 두 개를 가까이 옮기면, 겹치는 자리에 항상 같은 색만 보이고 반대쪽 색은 감쪽같이 사라지는 경우가 있습니다. 무작위로 그렇게 되는 게 아니라, 브라우저가 여러 개의 배경 그라디언트를 겹쳐 그릴 때 따르는 정해진 순서가 있기 때문입니다. 이 순서 규칙만 알면 어떤 점이 위로 올라올지 미리 예측할 수 있습니다.
요약 ① 배경에 그라디언트를 콤마로 여러 개 나열하면, 먼저 적힌 것이 가장 위에 그려지고 나머지는 차례로 그 아래에 깔립니다. ② 메시 그라디언트 도구는 화면의 색 점 목록 순서를 그대로 이 콤마 순서로 옮겨 적으므로, 목록 위쪽 점이 실제로도 위에 보입니다. ③ 새로 추가한 색 점은 항상 목록 맨 끝(가장 아래층)에 붙기 때문에, 기존 점과 겹치면 가려질 수 있습니다.
겹치는 자리에서 색이 사라지는 이유 — 왜 이게 문제인가
색 점 4~5개로 메시 그라디언트를 만들다 보면 위치를 조금씩 옮기다가 두 점이 서로 겹치는 순간이 옵니다. 이때 겹친 자리에는 두 색이 섞인 중간색이 아니라, 둘 중 한 색만 또렷하게 남는 경우가 많습니다.
문제는 "어느 색이 남는지"가 매번 다르게 느껴진다는 점입니다. 어떤 조합에서는 나중에 만든 점이 위로 보이고, 어떤 조합에서는 먼저 만든 점이 위로 보입니다. 그런데 이건 실제로는 무작위가 아니라, 색 점을 몇 번째로 추가했는지에 따라 이미 결과가 정해져 있는 규칙입니다.
배경 레이어가 쌓이는 순서 — 이렇게 확인합니다
도구 없이 확인하는 방법은 CSS 문법 자체를 이용하는 것입니다. background-image에 그라디언트나 이미지를 여러 개 콤마로 나열하면, 브라우저는 이 목록을 위에서 아래로 겹쳐 그립니다. 목록에서 먼저 적힌 값이 화면에서 가장 위(사용자와 가장 가까운 층)에 그려지고, 나중에 적힌 값일수록 그 아래에 깔립니다.
직접 확인하려면 메모장이나 브라우저 개발자 도구 스타일 패널에 같은 위치(center)를 겹친 원 두 개를 아래처럼 써넣어 보면 됩니다.
background-image:
radial-gradient(circle at center, red 0%, transparent 60%),
radial-gradient(circle at center, blue 0%, transparent 60%);
이 상태로 저장하면 원 전체가 빨간색으로 보입니다. red가 적힌 줄이 먼저이기 때문입니다. 두 줄의 순서를 서로 바꿔 blue를 앞으로 옮기고 다시 저장하면, 같은 위치인데도 이번엔 전체가 파란색으로 바뀝니다. 색이나 위치는 하나도 안 건드렸는데 순서만 바꿔서 결과가 뒤집히는 걸 눈으로 확인할 수 있습니다.
저희 도구로 확인하기. 이 조합을 매번 코드로 손수 써서 비교하는 대신, 슬라이더로 점을 겹쳐가며 바로 결과를 볼 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 즉시 CSS 생성
자주 막히는 지점
| 증상 | 원인 |
|---|---|
| 겹치는 자리에 항상 같은 색만 보임 | 그 색 점이 목록에서 더 앞쪽에 있어, 배경 레이어 중 가장 위에 그려지기 때문입니다. |
| 색 점을 새로 추가했는데 안 보임 | 새 점은 목록 맨 끝에 붙어 가장 아래층에 깔리므로, 기존 점과 겹치는 자리에서는 가려집니다. |
| 무작위 배치를 눌러도 겹침 결과 패턴이 그대로임 | 색과 위치만 무작위로 바뀌고, 몇 번째 점인지(쌓이는 순서) 자체는 그대로이기 때문입니다. |
| 번짐 크기를 키우면 겹침이 더 잘 보임 | 번짐 크기는 각 점의 색이 퍼지는 반경이라, 값이 클수록 옆 점과 겹치는 면적도 함께 넓어집니다. |
정리
- 배경에 그라디언트를 콤마로 여러 개 나열하면, 먼저 적힌 것이 가장 위에 그려지고 나머지는 순서대로 그 아래에 깔립니다.
- 메시 그라디언트 도구는 화면의 색 점 목록 순서를 그대로 CSS의 콤마 순서로 옮겨 적으므로, 겹치는 자리의 색은 목록 순서만 보고도 미리 알 수 있습니다.
- 새로 추가한 색 점은 항상 목록 맨 끝, 즉 가장 아래층에 붙습니다.
- 이 규칙은 이 도구만의 동작이 아니라 CSS
background-image자체의 규칙이라, 직접 코드를 써서 순서만 바꿔봐도 똑같이 확인됩니다.
무료 · 가입 불필요 · 브라우저에서 즉시 CSS 생성
자주 묻는 질문
겹치는 자리에서 어떤 색이 위로 보이는지는 어떻게 정해지나요?
background-image 목록에서 먼저 적힌 그라디언트가 위에 그려지고, 뒤에 적힌 것들이 차례로 그 아래에 깔립니다. 이 도구는 화면의 색 점 목록 순서를 그대로 이 콤마 순서로 옮겨 적기 때문에, 점 목록에서 위쪽에 있는 점이 실제 화면에서도 위에 그려집니다.
색 점을 추가했는데 화면에 안 보이는 이유는 뭔가요?
새로 추가한 색 점은 항상 목록 맨 끝에 붙습니다. 콤마로 나열된 배경 목록에서 맨 끝은 가장 아래층이므로, 앞서 있던 다른 점과 위치가 겹치면 그 점에 가려 안 보일 수 있습니다. 겹치지 않는 빈자리로 옮기면 바로 나타납니다.
겹치는 부분의 위·아래 순서를 직접 바꾸고 싶으면 어떻게 하나요?
복사한 CSS 코드에서 background-image에 나열된 줄의 순서를 바꾸면 됩니다. 콤마로 구분된 배경 목록은 어떤 CSS에서든 위에서부터 순서대로 쌓이므로, 원하는 색이 적힌 줄을 맨 앞으로 옮기면 그 색이 위로 올라옵니다. 이 도구 화면에는 순서를 직접 끄는 기능이 없지만, 위에 있는 점을 지웠다가 다시 만들면 그 점이 맨 뒤로 밀려나면서 결과적으로 순서를 바꿀 수 있습니다.