`noise.svg`の例

// 1
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <filter id="noise" x="0" y="0">
      <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
      <feBlend mode="screen"/>
    </filter>
    <rect width="500" height="500" filter="url(#noise)" opacity="0.5"/>
</svg>


// 2 - 粗め
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <filter id="noiseFilter">
    <feTurbulence 
      type="fractalNoise" 
      baseFrequency="0.6" 
      numOctaves="3" 
      stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#noiseFilter)" />
</svg>

publicフォルダにnoise.svg等で保存

svgを編集するには

VSコードでsvgファイルを開き、右上の「ファイルマーク」をクリックするとsvgのコードを編集できる

背景に設定

tailwindの場合

bg-[url()]：

                <main
                  className="relative bg-slate-200 bg-[url(/noise.svg)]"
                >
                  <Toaster />
                  {children}
                </main>

gradientをつける場合：

                <main
                  className="relative bg-gradient-to-r from-gray-200 to-gray-100"
                >
                  <div className="bg-[url(/noise.svg)] absolute inset-0 brightness-100 contrast-150" />
                  <Toaster />
                  <div className="relative">{children}</div>
                </main>

親タグにgradientの色を書き、bg-[url()] は１つ内側のタグに書く
childrenを囲うdivにrelativeをつけることで、children内の要素にはノイズをかけない
- *z-indexで調整することも可能だが後でややこしくなる

CSSの場合

globals.css ：

body {
  background-image: url("/noise2.svg");
  background-repeat: repeat;
}

gradient：

body {
  background: linear-gradient(to right, #a78bfa, #f3f4f6);
  position: relative;
  min-height: 100vh;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -10;
  background: url("/noise2.svg") repeat;
  opacity: 0.3; /* ノイズの濃さを調整 */
}

z-indexを下げないとbuttonを押したりできなくなる

Tailwind / CSS：ノイズのような背景