🫧 메시 그라데이션 생성기
radial-gradient 여러 겹을 자동 배치해 오로라처럼 번지는 배경 CSS를 만듭니다.
사용 방법
- 기준 색상을 선택합니다.
- 색 덩어리 수와 색상 흩뿌림 범위를 조절합니다.
- '다시 생성'을 눌러 마음에 드는 배치가 나올 때까지 반복합니다.
- 'CSS 복사'로 완성 코드를 가져갑니다.
이럴 때 유용해요
- 랜딩페이지 히어로 섹션의 트렌디한 배경이 필요할 때
- 앱 온보딩·스플래시 화면의 분위기 있는 배경을 만들 때
- OG 이미지·발표 슬라이드 배경으로 쓸 색감을 잡을 때
알아두면 좋은 팁
- 색상 흩뿌림을 30° 이하로 좁히면 차분한 단색 계열, 120° 이상으로 넓히면 화려한 멀티컬러 배경이 됩니다.
- 이미지 파일이 아닌 CSS라서 용량이 0에 가깝고 어떤 해상도에서도 깨지지 않는 것이 장점입니다.
- 배경 위에 글자를 올릴 계획이면 색 덩어리 수를 3~4개로 줄이고, 반투명 오버레이를 한 겹 얹으면 가독성이 좋아집니다.
자주 묻는 질문
메시 그라데이션이 뭔가요?
여러 지점에서 서로 다른 색이 부드럽게 번져 나와 그물(mesh)처럼 섞이는 그라데이션입니다. 포토샵의 진짜 메시 툴과 달리 웹에서는 radial-gradient 여러 개를 겹쳐 같은 느낌을 냅니다.
생성된 CSS는 어떻게 적용하나요?
복사한 background-color와 background-image 두 속성을 배경으로 쓸 요소의 선택자에 붙여넣으면 됩니다. 화면 전체 배경이면 body에 넣고 min-height: 100vh를 추가하세요.
같은 결과를 다시 만들 수 있나요?
색 덩어리 위치는 생성할 때마다 무작위라 같은 배치가 반복되지 않습니다. 마음에 드는 결과가 나오면 그 자리에서 CSS를 복사해 보관하세요. 코드만 있으면 언제든 동일하게 재현됩니다.
애니메이션을 넣을 수 있나요?
background-position은 radial-gradient의 at 좌표를 움직이지 못하므로, 요소를 2겹으로 만들어 opacity를 교차시키거나 CSS @property로 좌표 변수를 애니메이션하는 방법을 씁니다. 후자는 크롬 계열에서만 동작하니 주의하세요.
