SVG 패턴을 즉시 생성합니다. 색상·크기를 조절하고 SVG 또는 CSS background 코드로 사용하세요.

CSS background 코드


        

    


    

        
SVG 코드

        

            
            

        

    


    

        
SVG 패턴 생성기 사용법

        
    
            
  1. 패턴 종류를 선택합니다 (도트·격자·줄무늬·체크 등).
    2. 
            
  2. 전경·배경 색상을 선택합니다.
    3. 
            
  3. 크기·두께를 조정합니다.
    4. 
            
  4. CSS background 또는 SVG 코드를 복사해 사용합니다.
    5. 
        


        
주요 기능

        
    
            
  • 7가지 패턴 (도트·격자·가로선·세로선·대각선·십자·체커보드)
    • 
            
  • 색상·크기·두께 자유 조절
    • 
            
  • 실시간 미리보기
    • 
            
  • CSS background-image (data URL)와 raw SVG 두 가지 코드 출력
    • 
            
  • 완전 무료, 외부 통신 없음
    • 
        


        
활용 예시

        
    
            
  • 웹페이지 섹션 배경의 시각적 텍스처
    • 
            
  • 카드·박스의 배경 패턴
    • 
            
  • 발표 슬라이드 디자인 액센트
    • 
            
  • 일러스트·아트워크의 텍스처
    • 
            
  • 로딩 화면·스켈레톤 UI
    • 
        


        
SVG vs CSS background 차이

        
CSS background 형태(data URL)는 가장 가볍고 어디든 적용 가능합니다. raw SVG는 색상·크기를 동적으로 변경하기 쉬우며 React·Vue 컴포넌트로 활용하기 좋습니다. 일반 웹사이트에는 CSS 형태를 권장합니다.


        
자주 묻는 질문

        

            

                SVG 패턴이 일반 이미지보다 좋은 점?
                
해상도에 무관하게 선명하고, 파일 크기가 매우 작으며(보통 1KB 이내), 색상을 코드로 자유롭게 변경할 수 있습니다.

            

            

                패턴이 깨져 보이는 경우?
                
크기와 두께가 너무 크면 패턴이 잘려 보일 수 있습니다. 두께는 크기의 1/3 이하로 설정하세요.

            

            

                모바일에서도 잘 보이나요?
                
네, SVG는 모든 모던 브라우저(Chrome·Firefox·Safari·Edge)에서 지원됩니다. 너무 작은 패턴은 모바일에서 픽셀화될 수 있어 14px 이상 권장합니다.

            

            

                그라데이션 패턴도 가능한가요?
                
현재는 단색만 지원합니다. 그라데이션은 SVG에 <linearGradient>를 추가하면 가능하지만 본 도구는 단순화를 위해 제외했습니다.