CSS Utility

노이즈 · 필름 그레인

SVG 노이즈를 컬러 표면 위에 mix-blend로 얹어 디자이너들이 좋아하는 은은한 입자감을 더합니다. 이미지 없이 CSS만으로.

그라데이션 · overlay

그레인 강도

18%

그레인 스케일

0.65

작을수록 거친 입자, 클수록 미세한 입자 (baseFrequency)

블렌드 모드

애니메이션 그레인background-position을 steps()로 지터링 (모션 최소화 설정 시 정지)

CSS

.surface {
  position: relative;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #f59e0b 100%);
}
.surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.650' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}