ノイズテクスチャとは

SVG のフィルターで作ったランダムなノイズ模様を背景に薄く重ね、紙やフィルムのようなざらついた質感を加える技法。

概要

SVG の feTurbulence フィルターで作ったランダムな粒々模様（ノイズ）を、data: URI 形式で背景画像として要素に重ねる技法です。グラデーションだけだとのっぺりしがちな背景に、低い不透明度で重ねることで、紙やフィルムのようなざらついた質感（グレイン）を加えられます。

別名

表記ゆれ：ノイズテクスチャ、グレイン、ざらつき

AI への伝え方

「背景にざらついたノイズのテクスチャを重ねて」で伝わります。ノイズが強すぎると文字が読みにくくなるため、「薄く、控えめに」と不透明度の目安を伝えると仕上がりがぶれません。重ね方（mix-blend-mode）によって色の混ざり方が変わる点も、好みの質感が決まっている場合は伝えておくと安全です。

似たパーツとの違い

「グラデーション」は色をなめらかに変化させる背景の技法で、ノイズテクスチャはそのグラデーションの上にランダムな粒模様を重ねて質感を足す、いわば仕上げの一手間という関係です。

デモ

グラデーションの上にノイズを重ねたパネル

コード

HTML

<div class="noise-demo">
  <p>グラデーションの上にノイズを重ねたパネル</p>
</div>

CSS

.noise-demo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0017c1, #4dd0e1);
  color: #ffffff;
  font-family: sans-serif;
  text-align: center;
  overflow: hidden;
}

.noise-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* SVG の feTurbulence で作ったランダムな粒模様を data URI で敷く */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* 低い不透明度と screen 合成で、色を大きく変えずにざらつきだけを足す */
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}