필름 그레인

Film grain

매끈한 그라데이션 위에 미세한 노이즈를 얹어 아날로그 필름 같은 질감을 주는 기법. 그라데이션의 계단(밴딩)도 감춰줍니다.

다른 이름: Noise textureGrainy gradient

···

html

<div class="grad"><div class="noise"></div><h1>grain</h1></div>

css

.grad{position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 10%,#ff8a5b,transparent 60%),radial-gradient(90% 90% at 90% 90%,#6a5bff,transparent 60%),#1d1a2f;display:grid;place-items:center}
.noise{position:absolute;inset:0;opacity:.55;mix-blend-mode:overlay;animation:shift .2s steps(2) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes shift{50%{transform:translate(-3%,2%)}}
h1{position:relative;color:#fff;font-size:64px;font-style:italic;font-family:Georgia,serif;font-weight:400;margin:0}

SVG의 feTurbulence 필터로 노이즈를 만들고, 그걸 배경 이미지나 오버레이로 깝니다. 이미지 파일 없이 몇 줄로 만들 수 있고 해상도와 무관합니다.

mix-blend-mode: overlay나 soft-light로 섞으면 색은 유지하고 질감만 더할 수 있습니다.