필름 그레인·종이 질감의 노이즈 텍스처를 즉시 생성합니다. 디자인의 깊이감을 더하는 모던 트렌드.
CSS 코드
노이즈 텍스처 사용법
- 밀도(거칠기), 강도, 옥타브를 슬라이더로 조정합니다.
- 배경색과 합성 모드를 선택합니다.
- 실시간 미리보기로 결과를 확인합니다.
- CSS 코드를 복사해 사용합니다.
주요 기능
- SVG turbulence 기반 노이즈 (선명·가벼움)
- 밀도·강도·옥타브 자유 조절
- 3가지 합성 모드 (multiply·overlay·screen)
- data URL 형태의 CSS 출력 (이미지 파일 불필요)
활용 예시
- 밋밋한 단색 배경에 깊이감 추가
- 필름·아날로그 느낌의 디자인
- 종이·캔버스 질감 시뮬레이션
- 모던 SaaS 사이트의 텍스처 배경
- 일러스트·아트워크의 분위기 강화
옥타브와 밀도 가이드
옥타브가 높을수록 디테일이 풍부해지고, 밀도가 높을수록 노이즈가 거칠어집니다. 필름 그레인 효과는 옥타브 1~2 + 밀도 0.7~1.5, 종이 질감은 옥타브 3+ 밀도 0.3~0.6 정도가 자연스럽습니다.
자주 묻는 질문
SVG 텍스처가 PNG보다 좋은 점?
파일 크기가 매우 작고(보통 <1KB), 어떤 해상도에서도 선명하며, data URL로 CSS에 직접 포함할 수 있어 추가 HTTP 요청이 없습니다.
모든 브라우저에서 보이나요?
SVG turbulence 필터는 Chrome·Firefox·Safari·Edge 모두 지원됩니다.
성능에 영향이 있나요?
SVG는 가볍지만 많은 영역에 적용하면 모바일에서 약간 느릴 수 있습니다. 핵심 영역에만 사용하세요.
이미지 위에 노이즈를 입히려면?
이미지 위에 동일한 SVG를 absolute 포지션으로 겹치고 mix-blend-mode를 적용하면 됩니다.