KOEN

노이즈 배경 생성기

GRAIN · NOISE · SVG

단색이나 그라디언트 위에 SVG feTurbulence 노이즈(그레인)를 얹은 CSS를 만들고, 이음새 없는 타일 PNG로 저장해요.

PREVIEW 질감이 있는 배경 평평한 색 위에 아주 얇은 입자를 얹으면 화면이 인쇄물처럼 따뜻해져요.
LOUPE · 확대
CSS 0 KB 

        


        

          
PNG

          

            
            
            

              

                
                ×
                
              

              
            

          

        

      

    

  










  

    

      HOW TO
      
사용 방법

      
    
      
  1. 프리셋(종이 질감·리소 그라디언트·필름 그레인 등 6종)을 고르거나, 바탕을 단색 또는 그라디언트로 정하고 색과 각도를 골라요.
    2. 
      
  2. 노이즈를 단색/컬러로 정하고 강도·입자 크기·대비·디테일(옥타브)·합성 방식·타일 크기를 조절하며, 오른쪽 위 확대 루페로 입자를 확인해요.
    3. 
      
  3. '새 패턴'으로 노이즈 무늬를 바꿔 보고, 마음에 들면 'CSS 복사'로 코드를 가져가요.
    4. 
      
  4. 타일 PNG(바탕색 합성), 노이즈만 PNG(투명 배경), 전체 이미지 PNG(W×H) 중 필요한 것으로 저장해요.
    5. 
      

    

    

      PAIRS WELL WITH
      
같이 쓰기 좋은 도구

      
    

  

  
  

    FAQ
    
자주 묻는 질문

    
이미지 파일 없이 CSS만으로 노이즈 배경이 되나요?
네. SVG feTurbulence 필터를 data URI로 background-image에 넣고 타일로 반복하기 때문에 별도 이미지 파일이 필요 없어요. 코드 크기는 1KB 안팎이고, 복사 버튼 옆에 크기가 표시돼요.

    
타일 PNG를 반복하면 이음새가 보이지 않나요?
feTurbulence의 stitchTiles="stitch" 옵션으로 타일 가장자리가 이어지게 만들어서, 반복해도 이음새가 드러나지 않아요. 단, 그라디언트 바탕은 반복 타일이 될 수 없어서 타일 PNG에는 시작 색만 합성돼요.

    
합성 방식은 어떤 걸 골라야 해요?
overlay는 바탕색을 살리면서 자연스러운 질감을, soft-light는 더 은은한 느낌을 줘요. multiply는 어둡게, screen은 어두운 바탕 위에 밝은 입자를 얹을 때 좋아요. normal은 노이즈를 그대로 덮고 강도로 투명도를 조절해요.

    
'노이즈만 PNG'는 어디에 써요?
투명 배경에 노이즈만 그린 타일이라 피그마·포토샵에서 레이어로 올린 뒤 블렌드 모드와 불투명도를 직접 조절하고 싶을 때 써요. 강도 슬라이더 값이 PNG의 불투명도로 그대로 들어가요.