메시 그라디언트 생성기
여러 색상 포인트를 겹친 radial-gradient()로 섞어 메시 그라디언트를 만듭니다 — 이미지 파일 없이 순수 CSS 배경 하나로 완성됩니다.
미리보기에서 포인트를 끌거나, 포인트를 선택한 뒤 화살표 키로 옮길 수 있습니다.
background: radial-gradient(at 20% 20%, #8b5cf6, transparent), radial-gradient(at 80% 15%, #ec4899, transparent), radial-gradient(at 25% 80%, #06b6d4, transparent), radial-gradient(at 75% 75%, #f59e0b, transparent), #1e1b4b;결과 1줄, 224자메시 그라디언트란?
메시 그라디언트는 표면의 여러 지점에 놓인 색을 부드럽게 섞어 만드는 배경 효과로, 요즘 앱과 웹사이트 배경에서 인기가 많습니다. 이 도구는 여러 개의 radial-gradient(at X% Y%, color, transparent) 블롭을 배경색 위에 겹쳐 하나의 background 단축 속성으로 만들어 이미지 파일이나 라이브러리 없이 순수 CSS로 재현합니다.
사용 방법
색상 포인트를 추가하고 미리보기에서 포인트를 끌거나 X·Y 위치를 조절한 뒤 배경색을 고르거나 랜덤 생성을 눌러 보세요. 노이즈 슬라이더를 올리면 같은 단축 속성 안에 SVG 노이즈 질감이 덧입혀집니다. 미리보기가 실시간으로 바뀌고 CSS를 바로 복사할 수 있습니다.
자주 묻는 질문
이미지 없이 진짜 CSS인가요?
네. 겹쳐진 radial-gradient로 만든 하나의 background 단축 속성이라 어떤 크기에서도 선명하고 네트워크 요청이 전혀 없습니다. 노이즈를 올리면 SVG 노이즈 타일이 data: URL로 같은 단축 속성 맨 위에 들어가므로 따로 호스팅할 이미지 파일은 여전히 필요 없습니다.
CSS는 어디에 붙여넣나요?
선언을 복사해 히어로 섹션, 카드, 페이지 본문 등 어떤 요소의 배경으로도 넣으세요. 그라디언트가 보이도록 요소에 높이를 지정하세요.
그라디언트를 이미지로 내려받을 수 있나요?
네. 크기와 PNG·JPG를 고르면 CSS가 그리는 것과 같은 방식으로 이미지를 만들어 줍니다.
노이즈를 넣거나 미리보기에서 포인트를 끌어 옮길 수 있나요?
네. 노이즈 슬라이더를 올리면 메시 전체에 고운 SVG 노이즈 질감이 덮입니다. 기본값은 꺼져 있고 다른 설정처럼 링크에 함께 담기며, 이미지 다운로드를 누르면 같은 노이즈가 파일에도 그려져 미리보기와 같은 이미지가 나옵니다. 미리보기에는 포인트마다 둥근 손잡이가 있어 끌어서 옮기거나, 손잡이를 선택한 뒤 화살표 키로 옮길 수 있고 Shift를 누르면 더 크게 움직입니다. 옮기면 그 포인트의 X·Y 슬라이더도 따라 바뀝니다.