SVG 배경 패턴 생성기
도트·격자·줄무늬 등 반복 배경 패턴을 색·크기로 조절해 SVG/CSS로 생성
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
도트·격자·줄무늬·대각선·체커 다섯 가지 반복 패턴을 무늬 색과 배경 색, 타일 크기로 조절해 만듭니다. 결과는 용량이 아주 작은 SVG 하나를 반복하는 방식이라, 어떤 크기의 영역에도 선명하게 채워지는 CSS 배경 코드로 바로 복사할 수 있습니다.
사용 방법
- 탭에서 도트·격자·줄무늬 같은 패턴 종류를 고릅니다.
- 타일 크기와 점·선 굵기 슬라이더로 밀도를 조절합니다.
- 무늬 색과 배경 색을 지정해 원하는 분위기를 맞춥니다.
- 아래 'CSS 복사'로 background 코드를, 'SVG 복사'로 원본 SVG를 가져갑니다.
자주 묻는 질문
- 왜 이미지 파일 대신 SVG인가요?
- SVG는 벡터라 확대해도 깨지지 않고, 데이터 URI로 넣으면 별도 파일 요청 없이 CSS 안에서 바로 반복되어 페이지가 가벼워집니다.
- 무늬를 반투명하게 하고 싶어요.
- 무늬 색 HEX 뒤에 알파 값을 붙이면 됩니다. 예를 들어 #6366f180은 약 50% 투명도의 인디고입니다. 배경 색과 자연스럽게 겹쳐 은은한 텍스처가 됩니다.
- 생성된 코드를 그대로 써도 안전한가요?
- 표준 SVG와 CSS background 속성만 사용하므로 최신 브라우저에서 문제없이 동작합니다. 다만 색 대비가 지나치게 강하면 본문 가독성을 해칠 수 있으니 실제 화면에서 확인하는 참고용으로 활용하세요.